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

Question

- 场景

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

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

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

- 问题

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

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

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

1. 理想的解决方案可能是忽略地址栏，这样浏览器就不会改变视口(viewport)大小，我认为传统的 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;
  }

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