大家好,又见面了,我是你们的朋友全栈君。
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
点击阅读原文加我的微信群,每日分享好文章。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/133174.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...