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

Question

- SCENARIO

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

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

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

<标题> ——问题

除了手机上的浏览器(例如Android上运行的Google Chrome, iOS Safari, Android Browser等)，响应式设计的实现工作得很好。

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

这个效果是不断调整我的网页大小，作为容器的大小调整到视窗的高度，这是被变小时，地址栏显示，当地址栏隐藏，更大，我不希望这种情况发生。

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 (alternative #2 - test)

/* 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;
  }

所以用这种方式，当地址栏隐藏时屏幕改变，但它不会触发设计改变，只有当它有方向改变时，因为宽度会改变!希望我能帮上忙，因为我也在想办法解决一些手机设计的问题。欢呼。