在移动端避免使用100vh

最新推荐文章于 2024-08-08 18:54:52 发布

SunSeekerX

最新推荐文章于 2024-08-08 18:54:52 发布

阅读量687

点赞数

分类专栏： # JavaScript 和前端文章标签： JavaScript 前端 css

本文链接：https://blog.csdn.net/a1647800606/article/details/103455434

版权

在移动端，100vh的CSS单位在处理全屏布局时存在一些问题，因为移动浏览器的地址栏显示/隐藏会导致视口高度计算错误，从而影响用户体验。本文介绍了这一问题，并提出使用JavaScript的window.innerHeight作为解决方案，特别是在Vue项目中的应用，以确保元素高度始终适应屏幕的可见部分。

摘要由CSDN通过智能技术生成

在移动端避免使用100vh

CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。

核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。

如下所示：

在这里插入图片描述
当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。