CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可悲的是,事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。

核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕的底部将被切除。

如下所示:

当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。更糟糕的是,当用户首次访问移动设备上的网站时,地址栏将在顶部可见,因此默认的体验是破碎的体验。

更好的解决方案:window.innerHeight

解决此问题的一种方法是依靠javascript而不是CSS。页面加载时,将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。如果地址栏可见,则window.innerHeight将为全屏的高度。如果地址栏是隐藏的,则window.innerHeight将是屏幕上可见部分的高度,这正是您所期望的。

在Wordsheet.io上学习时,您可以看到这一点。例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。此外,通过在页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。

遗憾的是,在不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。

我的博客:http://caibaojian.com

公众号文章:http://t.cn/AiuNZVZG

掘金小册8折优惠:http://caibaojian.com/goods

点击阅读原文加我的微信群,每日分享好文章。

移动端避免使用100vh相关推荐

  1. 在移动端避免使用100vh

    在移动端避免使用100vh CSS中的Viewport单元听起来很棒.如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!遗憾的 ...

  2. bug 记录 - 安卓移动端高度使用 100vh 的坑

    发现问题 H5 页面适配移动端,页面分上下两部分,上部分是纯图片,需要占满一屏.下半部分是 form 表单内容,需要占满一屏.效果如下图. 如果分别将 图片Box 和 表单Box 的高度设置为 100 ...

  3. tinymce移动端使用_关于在移动端避免使用100vh的原因及解决方案

    1. 为什么避免使用100vh CSS中的Viewport单元听起来很棒.如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!遗 ...

  4. css背景图铺满整个屏幕

    pc端: h5端 : min-height:100vh;  当页面内容不够一屏时,使背景图至少铺满一个屏幕的高度: background加颜色是为了避免页面内容过长,背景图无法铺满,加与背景图相似的颜 ...

  5. 移动端100vh解决方法

    现象: 开发移动端时用vh开发保证页面一屏显示,开发时以及用安卓手机测试没有问题,但是在safari浏览器却出现滚动条 原因: safari浏览器的100vh包含了头边框和底边框,其他浏览器的100v ...

  6. 关于移动端适配100vh的问题

    需求场景: 因为场景需求做了一个组件需要全局显示modal:height设置100vh 真机出现的问题: 浏览器默认顶部会计算在100vh内 故导致modal 顶部显示不全问题 解决方案: 通过给mo ...

  7. 避免在移动端页面中使用100vh

    100vh带来的问题 在CSS中,视口单位(Viewport units)听起来不错.如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全 ...

  8. antd option宽度自适应_Web移动端实现自适应缩放界面的方法汇总

    作者 | 唐宋元明清2188来源 | http://www.cnblogs.com/kybs0/在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em.px ...

  9. 移动端也能兼容的web页面制作2:导航栏、背景图片设置

    [ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...

最新文章

  1. 自用懒加载(其实效果并不是很好),自带的懒加载还好(2)(优化)
  2. 哪些信用卡取现0手续费?
  3. 访问文件服务器提示“服务器存储空间不足”的解决方法
  4. answer的汉语_大概是几乎能满足你们所有要求的两所学校(汉语言文字学、语言学及应用语言学择校攻略)...
  5. python开发环境anaconda3_Python环境管理(Anaconda3)
  6. dynatrace监控发现Java代码中new对象耗时100多秒
  7. RIPng原理与实验
  8. Ubuntu桌面环境 安装与切换
  9. docker 升级版本
  10. 如何将时间字体LED化(类似电子表)显示
  11. java开发团队认知_一个优秀的研发团队应该具备什么特征
  12. Landsat卫星数据介绍及下载方法
  13. TOMCAT假死分析
  14. 家庭软路由方案:3865U + ESXi6.7(OpenWRTiKuai) + 花生壳蒲公英P5 + 领势MX5300 + 群辉1621 做到国内国外分流、内网设备流控、内网穿透、异地组网
  15. 我国供应链安全具体需要怎样进行一步一步建设
  16. 2014年中国十大移动O2O热门服务!
  17. 最大连接数与每ip连接数的限制
  18. 代码审计工具Checkmarx安装环境和安装过程
  19. anki 插入表格_【anki|批量制作选择题的另一种思路】- 一点资讯(Yidianzixun.com)
  20. Force DAO 任意铸币攻击事件复盘分析 | 零时科技

热门文章

  1. Linux系统如何安装Python?新手教程
  2. 2021年福建高考成绩排名查询,福建高考排名对应学校-福建高考位次查询(2021年文科参考)...
  3. UE4 蓝图常用节点汇总及意译(一)
  4. 计算机学算法的意义,浅析算法在计算机编程中的重要作用
  5. Hash表(C语言)
  6. 第十章Tensorflow图像处理
  7. Linux Mysql8.0安装
  8. Typora如何设置图片的位置更换保存路径
  9. 软件测试常用的工具都在这里了
  10. shortcut connection和highway network