【问题标题】：Mobile phone CSS - Address bar resizes screen size手机 CSS - 地址栏调整屏幕大小
【发布时间】：2015-12-17 08:00:32
【问题描述】：

- 场景

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

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

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

- 问题

除了手机上的浏览器（例如运行在 Android 上的 Google Chrome、iOS Safari、Android 浏览器等）之外，响应式设计实现运行良好。

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

这种效果会不断调整我的网页大小，因为容器的大小会根据视口的高度进行调整，显示地址栏时会变小，隐藏地址栏时会变大，而我没有不希望发生这种情况。

一个理想的解决方案可能是忽略地址栏，这样浏览器就不会改变视口大小，我认为这对于传统的js 代码是不可能的。
另一个选项可能包括避免每次地址栏显示和隐藏时执行调整大小方法。也就是说，页面应该在调整大小时改变其容器的高度，在显示和隐藏地址栏时不应该。
李>

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

有什么办法可以做到吗？

- 代码

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: turquoise;
}

JS（替代#2 - 测试）

/* This function blocks size-change on resize (it only works on reload) */

$(document).ready(function ($) {

        function constantHeight() {
            $("div.content_container").height($(window).height() + 60);
        }

        constantHeight();

});

【问题讨论】：

我知道已经有关于这个话题的问题，比如this one和that one。我尝试实施他们建议的解决方案，但是，他们对我的代码不起作用，这就是我发布这个问题的原因。

标签： android jquery html css responsive-design

【解决方案1】：

我既不是专家也不是真正的程序员，但是当我找到您的帖子时，我遇到了同样的问题，您在评论中添加的链接帮助我找到了适合我的解决方法。

我不会发布真正的代码，因为太乱了，但是，我所做的基本上是这样的：

我有一个使用 jquery 将我的网站大小更改为实际屏幕的功能，我使用http://detectmobilebrowsers.com/ 中的功能在其上添加了小条件。

  if (mobilecheck==true) {pageHeight=pageHeight+60;}

在我的代码后面，我有检查网站是否显示在桌面上的功能，因此它会在任何屏幕尺寸更改时调用我的 changeSize()，或者如果在移动设备中它有一些屏幕更改，但仅当宽度屏幕也发生了变化：

  var oldWidth;
  $(window).resize(function() {
  if (mobilecheck==false || window.innerWidth!=oldWidth) {
     changeSize(window.innerWidth,window.innerHeight);      
   }
   oldWidth = window.innerWidth;
  }

所以这样，当地址栏隐藏时屏幕会发生变化，但不会触发设计更改，只有在方向发生变化时才会触发，因为宽度会发生变化！希望我能提供帮助，因为我也在努力解决一些移动设计问题。干杯。

【讨论】：