移动端避免使用100vh[通俗易懂]

移动端避免使用100vh[通俗易懂]CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度,则可以设置height:100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可悲的是,事实并…

大家好,又见面了,我是你们的朋友全栈君。

CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度,则可以设置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的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。 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账号...

(0)


相关推荐

  • 对成绩进行排序c语言_c语言对学生成绩进行排序

    对成绩进行排序c语言_c语言对学生成绩进行排序解题思路:注意事项:注意姓名字符串的长度要大于8,因为这个调了很多次参考代码:#include#include#includeusingnamespacestd;structstudent{intnumber;charname[9];intscore;}buf[100000];boolcmp1(studenta,studentb){returna.number}boolcm…

  • java数组反转,Java数组反转

    java数组反转,Java数组反转本篇文章帮大家学习java数组反转,包含了Java数组反转使用方法、操作技巧、实例演示和注意事项,有一定的学习价值,大家可以用来参考。以下实例中我们使用Collections.reverse(ArrayList)将数组进行反转:importjava.util.ArrayList;importjava.util.Collections;publicclassMain{publicst…

  • 表空间

    表空间

  • 用Python串口实时显示数据并绘图pyqtgraph(详细教程)

    用Python串口实时显示数据并绘图pyqtgraph(详细教程)

  • idea查看激活码(JetBrains全家桶)

    (idea查看激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlHFFWNFD5GX-eyJsaWNlbnNlSWQi…

  • python 字幕文件ass格式转换成srt格式

    python 字幕文件ass格式转换成srt格式ass转srt脚本  自己写的一个python脚本,大家可以再GitHub上下载使用。目前为了处理字幕中的中文,ass文件的编码格式支持**UCS-2LEBOM**,srt文件的编码支持**ANSI**。因为我下载下来的字幕基本就是这两个编码。  由于代码测试只测试了个别的ass文件,而且没有完整地核对srt文件。所以代码难免会出现错误:如果您遇到其他编码的文件可以在本贴留言;如…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号