如何以CSS变量的形式在iOS上访问真实的100vh

Question

这是一个自我问答

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

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

Answer 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。