这是一个自我问答
如果你曾经尝试过在iOS的CSS中使用100vh
,你会发现当浏览器的chrome被扩展时,它实际上不是100 vh。这是一个有据可查的bug,苹果认为它实际上是一个功能!这就是a good read to explain the bug。
那么,什么是绕过这个“特性”的最好方法呢?理想情况下,答案不需要JavaScript(但这似乎不太可能),应该是干净的,不需要一堆内联样式,理想情况下可以选择在CSS中使用(有时你可能需要默认的100 vh)。
这是一个自我问答
如果你曾经尝试过在iOS的CSS中使用100vh
,你会发现当浏览器的chrome被扩展时,它实际上不是100 vh。这是一个有据可查的bug,苹果认为它实际上是一个功能!这就是a good read to explain the bug。
那么,什么是绕过这个“特性”的最好方法呢?理想情况下,答案不需要JavaScript(但这似乎不太可能),应该是干净的,不需要一堆内联样式,理想情况下可以选择在CSS中使用(有时你可能需要默认的100 vh)。
3条答案
按热度按时间5w9g7ksd1#
在样式表中设置一个根CSS变量,如下所示:
然后在JavaScript中,在加载(或jQuery ready事件)和调整大小时,您需要运行以下代码:
现在您可以简单地使用CSS:
height: var(--real100vh);
无论你想让100vh
实际上是移动上真正的100vh
,这将简单地工作!如果你在同一个元素上添加一个
transition: height 0.4s ease-in-out;
,看起来会更好,这样当你在移动设备上向下滚动时,它就不会折断。使用CSS var的好处是你可以在任何时候覆盖它,例如你可能希望某些断点是
height: 500px
,如果你使用内联样式,这很难做到。你也可以在calc()
中使用它,比如height: calc(var(real100vh) - 100px);
,它对于固定的头文件很有用。如果您使用Vue/Nuxt,请查看how we have implemented that here。
r6vfmomb2#
根据needed browser support,相对视口单位的最新迭代,例如
dvh
(动态视口高度)也可能是一个选项。当您想要视见区自动调整大小以回应动态展开或缩回的浏览器界面时,可以使用动态视见区大小。动态视见区大小可让您设计的内容完全符合视见区大小,而不论是否存在动态浏览器界面。
dldeef673#
CSS网格是解决方案。