如何使用 Javascript 找到虚拟视口/屏幕宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8677794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I find the virtual viewport/screen width using Javascript?
提问by
Is there a consistent way to determine the width of the screen and virtual viewport for mobile devices using Javascript? My target platforms are mobile Safari and Android's stock browser, but I'm also testing with other browsers on Android.
是否有一致的方法来确定使用 Javascript 的移动设备的屏幕宽度和虚拟视口？我的目标平台是移动 Safari 和 Android 的股票浏览器，但我也在 Android 上使用其他浏览器进行测试。
I've tried with screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth, and jQuery's $(window).width().
我已经试过screen.width，window.innerWidth，document.getElementByTagName("body")[0].clientWidth，和jQuery的$(window).width()。
Mobile Safari (from ios 3.1.3(7E18), original iPod touch) shows useful values, but the stock Android browser (Android 2.3.7) doesn't.
移动 Safari（来自 ios 3.1.3(7E18)，原始 iPod touch）显示有用的值，但股票 Android 浏览器 (Android 2.3.7) 没有。
Ideally, I think that screen.width should show the actual pixel resolution of the screen: 320px on the iPod Touch and 480px on the Samsung Galaxy S2. Based on what I've been reading, one of the other numbers should show the width of the layoutviewport which should be 980px on the iTouch and 800px on the Samsung Galaxy S2.
.
.
理想情况下，我认为 screen.width 应该显示屏幕的实际像素分辨率：在 iPod Touch 上为 320 像素，在三星 Galaxy S2 上为 480 像素。根据我一直在阅读的内容，其他数字之一应该显示布局视口的宽度，在 iTouch 上应该是 980 像素，在三星 Galaxy S2 上应该是 800 像素。.
.
Code
代码
<body>
<h1>screen.width: <span id="screen_width"></span></h1>
<h1>window.innerwidth: <span id="window_innerwidth"></span></h1>
<h1>clientWidth: <span id="clientwidth"></span></h1>
<h1>jQuery width: <span id="jquery_width"></span></h1>
</body>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var swidth = screen.width;
var wiwidth = window.innerWidth;
var cwidth = document.getElementsByTagName("body")[0].clientWidth;
var jwidth = $(window).width();
document.getElementById("screen_width").innerHTML = swidth;
document.getElementById("window_innerwidth").innerHTML = wiwidth;
document.getElementById("clientwidth").innerHTML = cwidth;
document.getElementById("jquery_width").innerHTML = jwidth;
}
</script>
.
.
.
.
Results
结果
iOS Safari:
screen.width: 320
window.innerwidth: 980
clientWidth: 964
jQuery width: 980
iOS Safari:
screen.width: 320
window.innerwidth: 980
clientWidth: 964
jQuery width: 980
Android Browser:
screen.width: 800
window.innerWidth: 800
clientWidth: 784
jQuery width: 800
Android 浏览器：
screen.width：800
window.innerWidth：800
clientWidth：784
jQuery 宽度：800
Firefox Mobile (a.k.a. Fennec):
screen.width: 480
window.innerwidth: 980
clientWidth: 964
jQuery width: 980
Firefox Mobile (aka Fennec):
screen.width: 480
window.innerwidth: 980
clientWidth: 964
jQuery width: 980
The Safari results are certainly useable, but not the Android Browser's results.
Safari 结果当然有用，但不是 Android 浏览器的结果。
It's ironic that the Firefox mobile results are accurate. Although it provides a nice browsing experience from a user perspective, it's not a big enough target for mobile devices and there are many other things that don't work well on this browser.
具有讽刺意味的是，Firefox 移动版的结果是准确的。尽管从用户的角度来看它提供了很好的浏览体验，但它对于移动设备来说还不够大，而且还有很多其他东西在这个浏览器上不能很好地工作。
采纳答案by Trott
Another StackOverflow questionhas this as a workaround:
另一个 StackOverflow 问题将此作为解决方法：
setTimeout(YourFunction, 200);
And if you want the details, you can read about the bug in the issue tracker. You're experiencing a bug that exists in Android 2.2 and 2.3.
如果您需要详细信息，可以阅读问题跟踪器中的错误。您遇到了 Android 2.2 和 2.3 中存在的错误。
回答by Peter-Paul van Gemerden
It may help to set the scale of the viewportto 1.0using this <meta> tag:
它可以帮助的规模设置viewport，以1.0使用该<meta>标签：
<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>
This solved a similar problem for me when when I was creating a responsive HTML/CSS layout for a mobile app (I was using CSS @mediaqueries).
当我为移动应用程序创建响应式 HTML/CSS 布局（我使用 CSS@media查询）时，这为我解决了类似的问题。
回答by testndtv
You can find out the various viewport widths by accessing the following link on the device
您可以通过访问设备上的以下链接来了解各种视口宽度
http://ipad.atwebpages.com/viewport.html
http://ipad.atwebpages.com/viewport.html
This would work for both desktop and mobile browsers..
这适用于桌面和移动浏览器..
Just to add, viewport is mainly useful for mobile devices only...
补充一点，视口主要仅对移动设备有用......
