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

德鲁·贝克

这是一个自我问答

如果您曾经尝试100vh在iOS上的CSS中使用，则将发现在扩展浏览器镶边时，它实际上不是100vh。苹果公司认为这是一个有据可查的错误，实际上是一项功能！这是一本很好的说明错误的书。

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

德鲁·贝克

在样式表中设置根CSS变量，如下所示：

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

然后在JavaScript中，在加载（或jQuery就绪）并调整大小时，您要运行以下代码：

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

现在，您可以简单地使用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，请在此处了解我们是如何实现的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。