避免在移动端页面中使用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)


相关推荐

  • 计划任务 SchedulerFactoryBean 配置

    计划任务 SchedulerFactoryBean 配置Quartz是开源任务调度框架中的翘首,它提供了强大任务调度机制,同时保持了使用的简单性。Quartz允许开发人员灵活地定义触发器的调度时间表,并可以对触发器和任务进行关联映射。此外,Quartz提供了调度运行环境的持久化机制,可以保存并恢复调度现场,即使系统因故障关闭,任务调度现场数据并不会丢失。此外,Quartz还提供了组件式的侦听器、各种插件、线程池等功能。Spring为创建Quart…

  • latex中长公式换行,很好的办法

    latex中长公式换行,很好的办法今天在编辑公式时,有一个公式很长,写到一行就出去了。当时之前换行都是方程组或者在括号完之后换,都没有问题。但是今天我也换行的是在括号中间断开。这样出现问题,编辑的时候会出错误提醒。上网查了一些论坛,也有人和我一样的问题,但是都没有解决方案。自己试了好几种方法,又和办公室的其他人讨论了一下,终于找办法了。比较简单的情况:方程组code:\begin{equation}\b

  • 华硕老毛子Padavan使用IPV6+Aliddns远程管理路由

    华硕老毛子Padavan使用IPV6+Aliddns远程管理路由华硕老毛子Padavan使用IPV6远程管理路由前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas是基于NumPy的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):importnumpyasnpimportpandasaspdimportmatplotlib.pyplotaspltimportseaborna

  • jsonObject转map_java 对象转map

    jsonObject转map_java 对象转map直接上代码,实现了对嵌套的对象进行转换。privateMap<String,Object>toMap(JSONObjectobject){Map<String,Object>map=newHashMap<String,Object>();Objectvalue;Stringkey;for(Iterator<?&

  • CentOS7安装mysql5.5

    CentOS7安装mysql5.5一、检查本地是否安装过其他版本的mysqlrpm-qa|grep-i mysql由于有些版本自带的有mariadb,检查是否有mariadb,若是有需要先卸载 yum-yremovemaria*二、下载mysql5.5的服务器和客户端的安装包 下载服务器包:wget https://dev.mysql.com/get/Downloads/MySQ…

  • Linux采用yum方式安装及卸载软件

    Linux采用yum方式安装及卸载软件前言很多时候,我们在Linux中安装了软件,但是却不怎么会卸载,Linux不像Windows可以直接在控制面板中卸载。这篇文章肯定会帮助到你。收藏好了。正文1.采用yum方式安装软件yum方式安装软件是最方便的,自己一直践行的理论是能用yum绝不用源码编译,当然,yum方式的优点就是简单方便,但是它的不能自己定义安装插件,这点在我们需要自定义安装包时很不方便,在实际中,要看自己的应用场景…

发表回复

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

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