移动浏览器窗口的高度和放大器;页面缩放 [英] Mobile browsers window height & page scaling
问题描述
有关使用缩放页面广泛哪里是为移动浏览器starge行为：
$（窗口）.height（）（和document.documentElement.clientHeight）返回错误heignt。结果是不太实际的时候。的差大约是10％
For wide pages with scaling where is starge behavior for mobile browsers: $(window).height() (and document.documentElement.clientHeight) returns wrong heignt. Result is less when actually. The difference is about 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>
至于结果，红色框具有高度小于窗口的高度
As result, the red box have height less then window height
所有作品宽度去除后得好：1200像素 =>问题页面缩放（自动适合页面由宽）。
All works well after removing of width: 1200px => Problem in page scaling (auto fit by page width).
如何获得正确的网页窗口的高度与缩放？
How to get correct window height for page with scaling?
window.innerHeight 缩放后恢复很有趣的结果。
window.innerHeight return very funny result after zooming.
在测试了iPhone（Safari浏览器和放大器;镀铬），的ipad，安卓4.0（铬）。对于Opera移动的差异较大。
Tested on iphone (safari & chrome), ipad, android 4 (chrome). For Opera mobile the difference is bigger
推荐答案
要从缩放尝试添加以下代码到你的头部分停止页面。
To stop the page from scaling try adding the following tag to your head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
您可以得到的宽度和通过JavaScript之后它的规模，如果你真的不得不这样做。（你不应该 - 使其反应，而不是）
You could get the width and scale it afterwards via JavaScript if you really have to (which you shouldn't - make it responsive instead).
这篇关于移动浏览器窗口的高度和放大器;页面缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
