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

我正在开发一个快速响应的网站，使用CSS

@media

标签和jQuery的

on（resize）

功能

主网页的容器在CSS文件上设置为宽度和高度分别为

100vw

和

100vh

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

-问题 除了手机上的浏览器（例如运行在Android上的Google Chrome、iOS Safari、Android浏览器等），响应性设计实现工作正常

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

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

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

js

代码中是不可能的

另一个选项可能包括避免每次显示和隐藏地址栏时使用resize方法。也就是说，页面在调整大小时应更改其容器的高度，但在显示和隐藏地址栏时不应更改

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

有什么办法可以做到这一点吗

-代码 JSFIDLE

HTML JS（备选方案2-测试）

---

我既不是专家，也不是真正的程序员，但当我发现你的帖子和你在评论上的链接时，我也面临着同样的问题。你在评论上的链接帮助我找到了一个对我来说很好的解决方法

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

我有一个函数，使用jquery将我的站点的大小更改为实际屏幕的大小，并使用中的函数添加了一个小条件

在后面的代码中，我有一个函数，用于检查网站是否显示在桌面上，以便在任何屏幕大小更改时调用my changeSize（），或者如果在移动设备中有一些屏幕更改，但仅当屏幕宽度也更改时：

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

因此，通过这种方式，当地址栏隐藏时，屏幕会改变，但它不会触发设计更改，只有当它的方向改变时，因为宽度会改变！

---

希望我能帮上忙，因为我也在绞尽脑汁解决一些手机设计问题。干杯。

我知道已经有关于这个话题的问题了，比如和。我试图实现他们建议的解决方案，但是，他们没有在我的代码上工作，这就是为什么我要发布这个问题。

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

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

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

/* 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();

});

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

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