Question

我想建立一个响应式的手机网站。构建像素完美的页面时，如何控制自己的身高？

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

我无法使用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单位的替代品是什么？

谢谢，Eidan

Answer 1

Vw和Vh受支持。您只需要添加此元标记

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

Answer 2

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

1。）在为根div样式设置的调整大小事件上.height = window.innerHeight +'px'; 这使您可以完全看到root div，但是地址栏会占用很多空间（尤其是横向）

2。）CSS：正文：{height：150vh}，根元素：{position：fixed} 更改大小后，可以进行“伪造”滚动，并且用户可以隐藏或显示地址栏，并且可以调整根元素的内容。

100vh和移动响应设计

2 个答案: