如何使用 Javascript 找到虚拟视口/屏幕宽度? [英] How do I find the virtual viewport/screen width using Javascript?
问题描述
是否有一种一致的方法可以使用 Javascript 确定移动设备的屏幕宽度和虚拟视口?我的目标平台是移动 Safari 和 Android 的股票浏览器，但我也在 Android 上使用其他浏览器进行测试.
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.
我尝试过 screen.width、window.innerWidth、document.getElementByTagName("body")[0].clientWidth, 和 jQuery 的 $(window).width().
I've tried with screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth, and jQuery's $(window).width().
移动 Safari(来自 ios 3.1.3(7E18)，原始 iPod touch)显示有用的值，但原生 Android 浏览器 (Android 2.3.7) 没有.
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.
理想情况下，我认为 screen.width 应该显示屏幕的实际像素分辨率:在 iPod Touch 上为 320 像素，在三星 Galaxy S2 上为 480 像素.根据我一直在阅读的内容，其他数字之一应该显示 layout 视口的宽度，在 iTouch 上应该是 980 像素，在三星 Galaxy S2 上应该是 800 像素..
.
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 layout viewport which should be 980px on the iTouch and 800px on the Samsung Galaxy S2.
.
.
<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>
.
.
iOS Safari:
屏幕宽度:320
window.innerwidth: 980
客户端宽度:964
jQuery 宽度:980
iOS Safari:
screen.width: 320
window.innerwidth: 980
clientWidth: 964
jQuery width: 980
Android 浏览器:
屏幕宽度:800
window.innerWidth: 800
客户宽度:784
jQuery 宽度:800
Android Browser:
screen.width: 800
window.innerWidth: 800
clientWidth: 784
jQuery width: 800
Firefox Mobile(又名 Fennec):
屏幕宽度:480
window.innerwidth: 980
客户端宽度:964
jQuery 宽度:980
Firefox Mobile (a.k.a. Fennec):
screen.width: 480
window.innerwidth: 980
clientWidth: 964
jQuery width: 980
Safari 的结果当然可以用，但 Android 浏览器的结果不行.
The Safari results are certainly useable, but not the Android Browser's results.
具有讽刺意味的是，Firefox 移动结果是准确的.尽管从用户的角度来看，它提供了不错的浏览体验，但对于移动设备来说，它的目标还不够大，而且还有许多其他东西在此浏览器上无法正常工作.
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.
推荐答案
另一个 StackOverflow 问题 将此作为解决方法:
setTimeout(YourFunction, 200);
如果你想要详细信息，你可以阅读问题跟踪器中的错误.您遇到了 Android 2.2 和 2.3 中存在的错误.
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.
这篇关于如何使用 Javascript 找到虚拟视口/屏幕宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
