- 设想

我正在开发一个响应式网站，使用 CSS@media标签和 jQuery 的on(resize)功能。

主网页的容器在CSS文件中设置有宽度和高度100vw和100vh分别。

使用 jQuery，我调整了网站上显示的元素的大小。

- 问题

除了手机上的浏览器（例如运行在 Android、iOS Safari、Android 浏览器等上的谷歌浏览器）之外，响应式设计实现工作正常。

移动网络浏览器通常会显示地址栏，向下滚动时会将其隐藏。再次向上滚动时，它们会再次显示。

这种效果会不断调整我的网页大小，因为容器的大小会根据视口的高度进行调整，当地址栏显示时会变小，而在地址栏隐藏时会变大，我不想要这个即将发生。

1. 一个理想的解决方案可能是忽略地址栏，这样浏览器就不会改变视口大小，我认为这在传统js代码中是不可能的。

2. 另一种选择可能是避免每次地址栏显示和隐藏时都使用调整大小方法。也就是说，页面在调整大小时应该改变其容器的高度，而不是在显示和隐藏地址栏时。

我已经尝试过这样做，但是，我无法开发这两个选项中的任何一个（在第二种情况下，我无法弄清楚如何同时实现这两个条件......）

有没有办法我可以做到这一点？

- 代码

JSFIDDLE

http://jsfiddle.net/kouk/emo7amuh/

HTML

<div class="container" id="first">  </div>
<div class="container" id="second"> </div>
<div class="container" id="third">  </div>
<div class="container" id="fourth"> </div>
<div class="container" id="fifth">  </div>

CSS

div.container {
    height: 100vh;
    width: 100vw;
}

div.container:nth-child(2n+1) {
    background-color: crimson;
}

div.container:nth-child(2n) {
    background-color: …