Question

对于具有缩放功能的宽页面，移动浏览器的starge行为是： $（window）.height（）（和document.documentElement.clientHeight）返回错误的heignt。实际上结果较少。差异大约是10％

简单测试页：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div style="width: 1200px">
    <div class="test-block" style="background-color: red">
      test block
    </div>
  </div>
<script type="application/javascript">
   var h = $(window).height();
   $('.test-block').css('height', h+'px');
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
page bottom<br/>
</body>
</html>

结果，红色框的高度低于窗口高度

删除宽度：1200px =＆gt;后，一切正常页面缩放问题（按页面宽度自动调整）。

如何为缩放页面获取正确的窗口高度？

window.innerHeight 在缩放后返回非常有趣的结果。

在iphone（safari＆amp; chrome），ipad，android 4（chrome）上测试过。对于Opera mobile来说差异更大

Answer 1

要停止缩放页面，请尝试将以下标记添加到您的头部。

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

如果你真的需要，你可以通过JavaScript获得宽度并进行缩放（你不应该这样做 - 反而让它响应）。

移动浏览器窗口高度＆amp;页面缩放

1 个答案: