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

这是一个自我问答

如果您曾经尝试过使用100vh在 iOS 上的 CSS 中，您会发现当浏览器 chrome 展开时，它实际上不是 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 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在移动设备上，这很简单！

如果你还添加一个，看起来会更好transition: height 0.4s ease-in-out;在同一个元素上，因此当您在移动设备上向下滚动时它不会对齐。

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

如果你使用 Vue/Nuxt，请看一下我们是如何实现这一点的.

2022 年 12 月更新

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

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