使用 CSS 在移动浏览器上 100% 高度

Question

我正在我的网站上工作，我希望它在移动设备上看起来非常简单，基本上只有三个部分，每个部分都应该适合窗口的宽度和高度

<section style="width: 100%; min-height: 100%">

</section>

它在我的计算机浏览器的设备模式下看起来很完美，但是当我在我的手机 (iPhone) 上打开它时，url 栏出现问题，当我们向下滑动时它会变小。在页面加载时，最小高度适应浏览器高度，包括栏，并且当栏改变它的尺寸时它不会改变。所以它不再适合屏幕。我试过这个：

 <meta name="viewport" content="height=device-height">

但是，很明显，部分太高了。也许我可以在 jQuery 中做一些解决方法，但我宁愿不这样做。我希望 CSS 中有一些简单的解决方案。感谢您的时间。

原文由 kacpergalka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这并不像人们想象的那么容易。

以下是 移动视口单元技巧 的一些摘录：

恰当的例子：滚动条是否应该考虑到 vw 单位？站点的导航或页面控件如何——这些应该算在计算中吗？然后是设备本身的物理属性（你好，缺口！）不容忽视。

然后解决方案提出：

 .my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

还有一些 JS：

 // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

还有一些 JS：

 // We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

原文由 Izhaki 发布，翻译遵循 CC BY-SA 4.0 许可协议