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

Question

这是自问自答

如果您曾尝试在 iOS 上的 CSS 中使用 100vh，您会发现当浏览器 chrome 是展开。这是一个有据可查的错误，Apple 认为它实际上是一个功能！这是a good read to explain the bug。

那么解决这个 "feature" 的最佳方法是什么？理想情况下，答案不需要 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);，它对固定 headers.

很有用

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

Answer 2

CSS 网格是解决方案。

.grid-container {
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 30px 1fr 30px
}

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

How to access the real 100vh on iOS in CSS

ios

css

height