如何在CSS中访问iOS上真正的100vh

Question

这是一个自我问答

如果您曾经尝试100vh在 iOS 上使用 CSS，您会发现当浏览器 chrome 展开时，它实际上并不是 100vh。这是一个有据可查的错误，苹果公司认为它实际上是一个功能！这是解释该错误的好读物。

那么绕过这个“功能”的最佳方法是什么？理想情况下，答案不需要 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.
        let value = "100vh"

        // If window size is iPad or smaller, then use JS to set screen height.
        if (window.innerWidth && window.innerWidth <= 1024) {
            value = `${window.innerHeight}px`
        }
        document.documentElement.style.setProperty("--real100vh", value)
    }

现在您可以简单地使用 CSS：height: var(--real100vh);无论您想要在移动设备上100vh实现真实的效果100vh，这都可以轻松实现！

如果您还在同一元素上添加 a ，效果会更好transition: height 0.4s ease-in-out;，这样当您在移动设备上向下滚动时，它就不会对齐。

使用 CSS var 执行此操作的优点是，您可以随时覆盖它，例如您可能希望某些断点为height: 500px，而如果您使用内联样式，则很难做到这一点。您也可以在内部使用它calc()，就像height: calc(var(real100vh) - 100px);对于固定标头很有用一样。

如果您使用 Vue/Nuxt，请在此处查看我们是如何实现的。

2022 年 12 月更新

现在，您可以使用 CSS 变量和媒体查询，无需 JS 即可实现此目的。就像这样：

:root {
    --unit-100vh: 100vh;
}
@supports (height: 100dvh) {
    :root {
        --unit-100vh: 100dvh;
    }
}