如何使用CSS在iOS上访问真实的100vh

问题描述 投票:0回答:1

这是一个自我问答

[如果您曾经尝试在iOS的CSS中使用100vh,则会发现当扩展浏览器镶边时,实际上不是100vh。苹果公司认为这是一个有据可查的错误,实际上是一项功能!这是a good read to explain the bug

那么,解决这个“功能”的最佳方法是什么?理想情况下,答案不需要JavaScript(但似乎不太可能),应该干净,不需要一堆内联样式,理想情况下可以在CSS中选择(有时您可能需要默认的100vh)。

ios css height
1个回答
1
投票

像在样式表中那样设置根CSS变量:

// CSS vars
:root {
    --real100vh: 100vh;
}

然后在JavaScript中,要在加载(或jQuery就绪)并调整大小时运行此代码:

    set100vhVar() {
        // If less than most tablets, set CSS var to window height.
        if (this.winWidth <= 1024) {
            document.documentElement.style.setProperty(
                "--real100vh",
                `${window.innerHeight}px`
            )
        } else {
            document.documentElement.style.setProperty(
                "--real100vh",
                "100vh"
            )
        }
    }

现在,您可以简单地使用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

© www.soinside.com 2019 - 2024. All rights reserved.