在移动端避免使用100vh
在移动端避免使用100vh
CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度,你可以设置高度:100vh
,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!遗憾的是,事实并非如此。100vh
在不同的浏览器的实现方式上也有一点微妙的变化,这使得它几乎毫无用处。最好避免100vh
,而是依赖javascript
来设置高度,以获得完整的视口体验。
核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。这些浏览器没有将100vh
的高度调整为视口高度变化时屏幕的可见部分,而是将100vh
设置为隐藏地址栏的浏览器高度。结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh
的初衷。
如下所示:
当地址栏可见时,由于移动浏览器不正确地将100vh
设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应该在屏幕底部的按钮被隐藏了。更糟糕的是,当用户第一次使用手机访问网站时,地址栏会显示在页面顶部,因此用户体验是很糟糕的。
一个好的解决方案: window.innerHeight
解决这个问题的一种方法是依赖javascript而不是css。当页面加载时,将高度设置为window.innerHeight
将正确地将高度设置为窗口的可见部分。如果地址栏是可见的,那么window.innerHeight
是全屏的高度。如果地址栏是隐藏的,那么window.innerHeight
将是屏幕可见部分的高度,正如您所期望的那样。
在vue项目中使用
${app}/src/app.vue
<script>
export default {name: 'App',mounted() {// First we get the viewport height and we multiple it by 1% to get a value for a vh unitlet vh = window.innerHeight * 0.01// Then we set the value in the --vh custom property to the root of the documentdocument.documentElement.style.setProperty('--vh', `${vh}px`)// We listen to the resize eventwindow.addEventListener('resize', () => {// We execute the same script as beforelet vh = window.innerHeight * 0.01console.log(vh);document.documentElement.style.setProperty('--vh', `${vh}px`)})},
}
</script>
${app}/views/foo.vue
<style lang="scss" scoped>
.container {height: 100vh; /* Fallback for browsers that do not support Custom Properties */height: calc(var(--vh, 1vh) * 100 - 46px);
</style>
在之前设置为
100vh
,可以兼容某些不支持自定义属性的浏览器。
遗憾的是,仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。height: 100vh
是如此接近伟大,但考虑到它在移动设备上的局限性,最好避免它。
参考或翻译
Avoid 100vh On Mobile Web https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
The trick to viewport units on mobile https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
在移动端避免使用100vh相关推荐
- bug 记录 - 安卓移动端高度使用 100vh 的坑
发现问题 H5 页面适配移动端,页面分上下两部分,上部分是纯图片,需要占满一屏.下半部分是 form 表单内容,需要占满一屏.效果如下图. 如果分别将 图片Box 和 表单Box 的高度设置为 100 ...
- tinymce移动端使用_关于在移动端避免使用100vh的原因及解决方案
1. 为什么避免使用100vh CSS中的Viewport单元听起来很棒.如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!遗 ...
- 移动端避免使用100vh
CSS中的视口单位听起来很棒.如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可悲的是,事实并非如此.100 ...
- css背景图铺满整个屏幕
pc端: h5端 : min-height:100vh; 当页面内容不够一屏时,使背景图至少铺满一个屏幕的高度: background加颜色是为了避免页面内容过长,背景图无法铺满,加与背景图相似的颜 ...
- 移动端100vh解决方法
现象: 开发移动端时用vh开发保证页面一屏显示,开发时以及用安卓手机测试没有问题,但是在safari浏览器却出现滚动条 原因: safari浏览器的100vh包含了头边框和底边框,其他浏览器的100v ...
- 关于移动端适配100vh的问题
需求场景: 因为场景需求做了一个组件需要全局显示modal:height设置100vh 真机出现的问题: 浏览器默认顶部会计算在100vh内 故导致modal 顶部显示不全问题 解决方案: 通过给mo ...
- 避免在移动端页面中使用100vh
100vh带来的问题 在CSS中,视口单位(Viewport units)听起来不错.如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全 ...
- antd option宽度自适应_Web移动端实现自适应缩放界面的方法汇总
作者 | 唐宋元明清2188来源 | http://www.cnblogs.com/kybs0/在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em.px ...
- 移动端也能兼容的web页面制作2:导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
最新文章
- 关于HTTP GET请求的url中文参数编码
- 采用IpIq控制方法和电流空间和电压空间的PWM方法控制
- PHP (20140519)
- boost::hana::monadic_fold_left用法的测试程序
- 整合Spring Security
- date js 半年_JavaScript Date对象
- case when then else_每天一个常用MySQL函数-[case_when_then_end]
- SpringAOP配置与使用(示例)
- JAVA:实现Gaussian高斯算法(附完整源码)
- RTL8187B无线网卡不能上网的解决办法
- 冒泡排序原理+冒泡排序代码详解
- 安装CAD2006出现html,win10系统安装cad2006出现已终止CAd2006-simplifieng安装的设置教程...
- [RK3399 Android7.1.2]新增wifibt模块:rtl8822cs驱动以及解决所遇问题
- weak_auth 小宁写了一个登陆验证页面,随手就设了一个密码。
- Invocation of init method failed; nested exception is java.lang.NoClassDefFoundError: com/po/IdCard
- 好用的revit软件:MEP绘制管道风管时,提示不可见如何解决?
- 奥比中光深度摄像头_苹果收购Primesense后,奥比中光希望用它的深度摄像头填补市场空白...
- 批量制作PR字幕——雷特字幕插件
- windows双屏显示如何设置
- 海思 YOLOv5 pytorch 转 onnx 转 Caffe 再转 wk 的转化详解
热门文章
- 夏季衣服时尚搭配分享
- RGB、Hex等颜色的匹配
- win ce车载系统_突破国际巨头垄断,森思泰克首次实现大批量77GHz车载毫米波雷达的国产化...
- DNT界面显示原理,来自官方
- Java基本语法入门
- 项目管理:代码检查 pre-commit 使用详解
- 网站降权根服务器有关系吗,实例讲述更换服务器后导致网站降权的解决方法
- 【分治法】中位数问题和Gray码问题——武汉理工大学算法设计与分析课程实验
- Office EXCEL 表格如何设置某个单元格是选择项,如何设置二级下拉菜单 MS Office版
- 苹果cmsv10卧龙影视资源站专用免费PC模板