大家好,又见面了,我是你们的朋友全栈君。
100vh带来的问题
在CSS中,视口单位(Viewport units)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh
,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh
在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh
,而应该通过javascript设置高度的方式来获得完整的视口体验。
核心问题是移动浏览器(说的就是你,Chrome和Safari)具有“有用”功能:地址栏有时可见,有时隐藏,从而改变了视口的可见大小。当视口高度变化时,这些浏览器没有将100vh
的高度调整为屏幕的可见部分的高度,而是将100vh
设置为隐藏了地址栏的浏览器的高度(其实就是100vh
高度没变,但是地址栏那块把内容顶出去了一块)。结果导致:当地址栏可见时,屏幕的底部将被切断,从而破坏了开始时100vh
的目的。
如下所示:
一个更好的解决方法:window.innerHeight
解决该问题的一种方法是依靠JavaScript而不是CSS。在页面加载时,将高度设置为window.innerHeight
可以将高度正确设置为窗口的可见部分高度。 如果地址栏可见,则window.innerHeight
将为全屏的高度。 如果地址栏处于隐藏状态,则window.innerHeight
就是你期望的只是屏幕可见部分的高度。
在Wordsheet.io上学习时,你可以看到这一点。例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见,屏幕都将是视口的高度。此外,在页面首次加载时将高度固定为适当的大小,可以防止在使用该网站的过程中地址栏隐藏,从而带来尴尬的屏幕调整大小体验。
遗憾的是,在不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。100vh
是如此接近伟大(greatness),但考虑到它在移动设备上的局限性,最好避免使用它。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/133525.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...