避免在移动端页面中使用100vh

避免在移动端页面中使用100vh100vh带来的问题在CSS中,视口单位(Viewportunits)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height:100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方…

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

100vh带来的问题

在CSS中,视口单位(Viewport units)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方式来获得完整的视口体验。

核心问题是移动浏览器(说的就是你,Chrome和Safari)具有“有用”功能:地址栏有时可见,有时隐藏,从而改变了视口的可见大小。当视口高度变化时,这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度,而是将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账号...

(0)
blank

相关推荐

  • 显示搜索dota2协调服务器,老司机教你处理搜索dota2游戏协调服务器中【操作流程】…[通俗易懂]

    显示搜索dota2协调服务器,老司机教你处理搜索dota2游戏协调服务器中【操作流程】…[通俗易懂]win7系统有很多人都喜欢使用,我们操作的过程中常常会碰到win7系统搜索dota2游戏协调服务器中的问题。如果遇到win7系统搜索dota2游戏协调服务器中的问题该怎么办呢?很多电脑水平薄弱的网友不知道win7系统搜索dota2游戏协调服务器中究竟该怎么解决?其实不难根据下面的操作步骤就可以解决问题1:DOTA2服务器蹦了之后,进入DOTA2,发现最顶端先是提示:“搜索DOTA2协调服务器中…”…

  • Rancher Fleet使用教程

    Rancher Fleet使用教程Rancherfleet介绍https://fleet.rancher.io/https://github.com/rancher/fleet博客截止日期为:20201204当前官网版本为v0.3.0,但在实践中发现此版本使用私有仓库无法正常工作,更新为v0.3.1可正常使用;有一些官方文档说的不清楚的地方,在这篇博客中进行了完善;fleet是一个轻量级的gitops工具,不管是管理单个集群还是大量集群都有很好的性能;两段pull工作模式:Fleetmanagerpullfr

  • pycharm中html怎么运行_pycharm如何调试代码

    pycharm中html怎么运行_pycharm如何调试代码PyCharm调试程序,cmd中输入的变量怎么设置PyCharm调试程序,cmd中输入的变量的设置方法CMDdos定义变量,DOS下也只有环境变量可以用;SET[variable=[string]]variable指定环境变量名。string指定要指派给变量的一系列字符串。要显示当前环境变量,键入不带参数的SET。使用pycharm添加py文件,怎么调试PyCharm安装1…

  • python廖雪峰学习笔记[通俗易懂]

    python廖雪峰学习笔记[通俗易懂]Python基础知识自用

    2022年10月24日
  • Scrapy项目 – 数据简析 – 实现腾讯网站社会招聘信息爬取的爬虫设计

    Scrapy项目 – 数据简析 – 实现腾讯网站社会招聘信息爬取的爬虫设计一、数据分析截图本例实验,使用Weka3.7对腾讯招聘官网中网页上所罗列的招聘信息,如:其中的职位名称、链接、职位类别、人数、地点和发布时间等信息进行数据分析,详见如下图:图1-1Weka3.7分析界面图1-2职位数据ZeroR分析界面图1-3数据聚类分析界面图1-4数据Visualize分析界面二、数据分析结论由图2-1可知,随着应聘人数的…

  • customErrors与错误页面[通俗易懂]

    customErrors与错误页面[通俗易懂]本配置节相对简单而且常用mode的值有如下三种值说明On指定启用自定义错误。如果未指定 defaultRedirect,用户将看到一般性错误。Off指定禁用自定义错误。这允许显

发表回复

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

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