移动端避免使用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)
blank

相关推荐

  • 使用Intellij Idea打包java为可执行jar包

    使用Intellij Idea打包java为可执行jar包自己在实际工作中的需要,使用Idea打包项目为可执行的jar包,网上找了好多文章但总是不成功,多次尝试后终于跑通,所以记录下来,希望可以帮助各位步骤:1.选中Java项目工程名称,在菜单中选择 File->projectstructure… (快捷键Ctrl+Alt+Shift+S)。2.在弹出的窗口中左侧选中”Artifacts”,点击”+”选择ja

  • Openssl Heartbleed

    Openssl Heartbleed近日闹的沸沸扬扬的Heartbleed漏洞,仿佛一下子再次将人们拉回了对网络安全的关注和担忧。这个问题就是由于服务器端没有对用户发过来的心跳包数据进行边界检查,服务端根据用户心跳包指定的数据长度来返回同样长度的数据。如果用户指定长度为100字节,而实际心跳数据的长度只有1字节,服务端还是会memcpy长度100字节的数据,这样就会把服务端内存中的数据返回给用户,可能会…

  • 我终于搞懂了TCP的三次握手和四次挥手(图片案例超详解)

    我终于搞懂了TCP的三次握手和四次挥手(图片案例超详解)本篇超级详细的讲解了TCP三次握手和四次挥手!欢迎阅读学习交流!

  • Laravel如何引用第三方(自定义)库

    Laravel如何引用第三方(自定义)库

    2021年10月25日
  • Laravel 使用多个数据库连接

    Laravel 使用多个数据库连接Laravel 使用多个数据库连接

  • mysql 练习题

    mysql 练习题一、上机内容使用SQL语句创建数据库studentsdb。、Createdatabasestudentdb;2.使用SQL语句选择studentsdb为当前使用数据库。Usestudentdb;3.使用SQL语句在studentsdb数据库创建数据表student_info、curriculum、grade,三个表的数据结构如表1-表3所示。createtablestude…

发表回复

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

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