100vh 和移动响应式设计答案

【问题标题】：100vh and mobile responsive design100vh 和移动响应式设计
【发布时间】：2019-02-01 03:39:57
【问题描述】：

我想为移动设备构建响应式网站。在构建像素完美的页面时，如何控制我的高度？

您可能知道，移动浏览器不支持视口单元，这是一个已知问题。

我无法使用 vw 或 vh，因为它们不受支持
我不能使用%，因为我需要为父元素设置高度
我不能使用 px 或任何静态单位，因为我正在构建响应式设计

我整理了一些东西，以便您获得更好的主意：

* {
  margin: 0;
}

#page1 {
  height: 100vh;
}

#top {
  height: 30%;
  background: #ddd;
}

#bottom {
  height: 70%;
  background: #ccc;
}

#page2 {
  height: 100vh;
}

#page3 {
  height: 100vh;
}

<body>
  <div id="page1">
    <div id="top">This is the top of page1. Its height should be 30% of 100vh
    </div>
    <div id="bottom">This is the bottom part of page1. Its height should be 70% of 100vh</div>
  </div>
  <div id="page2"> This is page 2 and is also 100vh high</div>
  <div id="page3"> This is page 3 and is also 100vh high</div>
</body>

现在这在 PC 上完全没问题，但在移动设备上，当地址栏隐藏/显示时它会变得跳跃，这是不可接受的。

那么vh 单元的任何替代方案？

谢谢，艾丹

【问题讨论】：

标签： html css mobile responsive-design viewport-units

【解决方案1】：

支持 Vw 和 Vh。你只需要添加这个元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

是的，我确实使用了所有元标记，我只是没有将它们包含在示例中。以下是有关该问题的更多详细信息：bugs.webkit.org/show_bug.cgi?id=141832
我想你可以用 javascript 来做，看这里：developers.google.com/web/updates/2016/12/url-bar-resizing
这仍然不是您所期望的行为 + 它唯一的 Chrome，因此它几乎无法用于实际生产（还有其他浏览器 + iOS 需要担心）。我读过你可以用 JS 来做，但还没有找到任何可行的解决方案。
另外，当你想让一个元素占据你的 vh 的 30% 时，当 URL 栏消失时，它也会改变该元素的高度.. 真的很令人沮丧......
我知道在IOS上有隐藏url bar的技术但是我在Android上从来没有成功过..也有库可以切换到全屏但我从未测试过developers.google.com/web/fundamentals/native-hardware/…

【解决方案2】：

支持 CSS 单元 vh 和 vw，但在移动设备上地址栏是个问题。当您使用根元素高度：100vh 时，此元素的底部超出视口。我的解决方案：

1.) 为根 div 设置大小调整事件 style.height = window.innerHeight+'px'; 这使您的根 div 完全可见，但地址栏占用了大量空间（尤其是横向）

2.) CSS：主体：{高度：150vh} 和根元素：{位置：固定} 这允许“假”滚动，并且用户可以隐藏或显示地址栏，并且根元素的内容会在大小更改时适应。

【讨论】：