Question

我正在根据百分比制作响应式网站。我已将视口标记包含在内，如下所示

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

，html和body标签如下：

 html {
       width:100%;
       height:100%;
       margin:0;
      }

 body {
      width:100%;
      height:100%;
      margin:0;
      }

和其他元素从那里采取他们的大小。在Chrome模拟器工具中，一切看起来都很好，我根据事情看起来很简单（愚蠢？），但是当我在实际设备上测试时，我的设计因为移动浏览器ui元素（url bar滑入和滑出等）而导致我失败问题。例如，在Android设备上，在向上和向下滚动时，窗口大小会不断变化，而在ios上，即使在网址栏滑出后，它仍然保持原始高度的静态。这可能有助于读者更好地理解。

以下代码段

 alert( 'Your screen resolution is ' + screen.width + 'x' + screen.height );
 var h = $( window ).height();
 alert(h);
 $(window).resize(function() {
 var newh = $( window ).height();
 alert(newh);
 });

在iPhone 4（ios7），华硕Nexus 7（棒棒糖）和三星Galaxy S-Plus（Android 2.3）上进行测试，结果如下：

 iPhone: 320x480, 372 and no change then on resize.
 Nexus: 601x962, 785, 881. (96px differential)
 Galaxy-S Plus: 320x452 (measures screen height less ui initially?), 452, 508.

在这里发现风滚草（可能不清楚？）之后 Is there a way to prevent viewport resizing due to ui elements like url bar?我仍然难过。

有没有办法管理浏览器chrome导致的ios和android窗口高度变化？

0 个答案: