在移动前端上避免使用100vh单位

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单位相关推荐

vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
html5封装图片,简单封装前端上传文件/图片
前言最近项目会一直用到各种类型的上传文件的功能, 所以就基于elment-ui简单的做了一个封装, 比较好用正文引入 import TestUpload from '../components/ ...
matplotlib 给坐标轴上的数字加单位
matplotlib 给坐标轴上的数字加单位示例图代码实现 import matplotlib.pyplot as plt import matplotlib.ticker as mtickerp ...
关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。
文章出处:Jiangkuobo,微信:jkb_267460 文章目录前言一.使用elementPlus上传图片,出现的问题. 二.验证猜想 1.验证方式: 2.测试结果: 3.我的猜想与验证三. ...
前端上传视频至阿里云
1.开通阿里云服务,获取userId 官方文档地址:https://help.aliyun.com/document_detail/52204.html?spm=a2c4g.11186623.6.91 ...
前端上传大文件怎么处理
前端上传大文件怎么处理 - 掘金背景当我们在做文件的导入功能的时候,如果导入的文件过大,可能会导所需要的时间够长,且失败后需要重新上传,我们需要前后端结合的方式解决这个问题思路我们需要做几件事 ...
关于前端上传文件到七牛云的一些笔记
关于前端上传文件到七牛云的一些心得前言申请账户具体步骤算了小技巧七牛云没有监控上传进度和上传错误的 API ?(JS SDK) React 更新 state 中的数组不能触发动画效果? 前 ...
设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位代码如下: yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{ ...
关于使用jQuery前端上传文件
关于使用jQuery前端上传文件我们都知道 html中file类型的input可以直接读取本地的文件; 如果使用form表单的话,那么action = url 这就会上传完文件会刷新页面,返回值就会 ...

在移动前端上避免使用100vh单位

更好的解决方案：window.innerHeight

在移动前端上避免使用100vh单位相关推荐

最新文章

热门文章