手机 CSS - 地址栏调整屏幕大小

Question

- 设想

我正在开发一个响应式网站，使用 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: 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();

});

Answer 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;
  }

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