ios - 如何在 iOS 上用 CSS 访问真正的 100vh

Question

这是 self 问答

如果您曾尝试在 iOS 的 CSS 中使用 100vh，您会发现当浏览器 chrome 展开时它实际上并不是 100vh。这是一个有据可查的错误，Apple 认为它实际上是一个功能!这是 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.
        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() 中使用它，例如 height: calc(var(real100vh) - 100px); 这对于固定 header 很有用。

如果你使用 Vue/Nuxt，看看 how we have implemented that here .

2022 年 12 月更新

您现在可以在没有 JS 的情况下使用 CSS 变量和媒体查询来实现此目的。像这样:

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