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

点击阅读原文加我的微信群,每日分享好文章。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/133174.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月9日 下午5:00
下一篇 2022年6月9日 下午5:16


相关推荐

  • kafka和rabbitmq和activemq区别_kafka消息持久化处理

    kafka和rabbitmq和activemq区别_kafka消息持久化处理一、语言不同RabbitMQ是由内在高并发的erlanng语言开发,用在实时的对可靠性要求比较高的消息传递上。kafka是采用Scala语言开发,它主要用于处理活跃的流式数据,大数据量的数据处理上二、结构不同RabbitMQ采用AMQP(AdvancedMessageQueuingProtocol,高级消息队列协议)是一个进程间传递异步消息的网络协议RabbitMQ…

    2025年7月9日
    7
  • html在线编辑器源代码_html编程

    html在线编辑器源代码_html编程变一般软件开发中必备的一样工具就是代码编辑器。传统的代码编辑器一般都是以软件安装包的形式安装到电脑里面,代码编辑保存后一般也是通过ftp或者svn等工具提交到服务器的(当然,像.NET开发中MicrosoftVisualStudio这样强大的集成工具另说了。)。在实际的项目开发中这样的方式也是挺便捷的。但是,随着各种云服务的兴起,云存储时代几乎已经是大势所趋了。个人或者小公司搭建一个类似的…

    2022年8月14日
    4
  • Python数据可视化 | 豆瓣电影Top250数据分析「建议收藏」

    Python数据可视化 | 豆瓣电影Top250数据分析「建议收藏」本文通过python对已爬取并保存在Excel里的豆瓣电影Top250信息进行数据可视化分析。

    2022年6月17日
    32
  • 公钥和私钥的解释

    公钥和私钥的解释对称加密对称密钥加密 又称私钥加密 即信息的发送方和接收方用一个密钥去加密和解密数据 它的最大优势是加 解密速度快 适合于对大数据量进行加密 但密钥管理困难 采用单钥密码系统的加密方法 同一个密钥可以同时用作信息的加密和解密 这种加密方法称为对称加密 也称为单密钥加密 需要对加密和解密使用相同密钥的加密算法 由于其速度 对称性加密通常在消息发送方需要加密大量数据时使用 对称性加密也称为密钥加密

    2026年3月17日
    2
  • 所有帖子的 分类 总结

    所有帖子的 分类 总结一,数据库的数据库从入门到精通01:https://blog.csdn.net/u012932876/article/details/116212832数据库从入门到精通02:https://blog.csdn.net/u012932876/article/details/117715317数据库从入门到精通03:https://blog.csdn.net/u012932876/article/details/117359992Oracle数据库的操作:https://blog.csdn.net/u

    2022年6月6日
    32
  • jvm常见的垃圾回收算法_垃圾回收机制算法

    jvm常见的垃圾回收算法_垃圾回收机制算法在早期的计算机语言,比如C和C++,需要开发者手动的来跟踪内存,这种机制的优点是。但是它也有它的缺点,新的编程语言,比如JAVA,Go,Python,PHP…现在市面上的大部分主流编程语言,都采取了一个方案,那就是“垃圾回收机制”,运行时自身会运行相应的垃圾回收机制。。垃圾回收器(GC)会在适当的时候将的内存给释放掉。GC的优点:GC的缺点:JVM的内存结构包括四大区域:1.程序计数器2.栈(虚拟机栈,本地方法栈)3.堆4.方法区举个例子,任何组织里,人都有三个派别,1.积极派2.消极派

    2022年10月13日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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