是否有一致的方法来使用 Javascript 确定移动设备的屏幕和虚拟视口的宽度？我的目标平台是移动 Safari 和 Android 的原生浏览器，但我也在 Android 上使用其他浏览器进行测试。
我尝试过 screen.width、window.innerWidth、document.getElementByTagName("body")[0].clientWidth 和 jQuery $(窗口).width()。
Mobile Safari（来自 ios 3.1.3(7E18)、原始 iPod touch）显示有用的值，但普通 Android 浏览器 (Android 2.3.7) 则没有。
理想情况下，我认为 screen.width 应显示屏幕的实际像素分辨率：iPod Touch 上为 320px，Samsung Galaxy S2 上为 480px。根据我所阅读的内容，其他数字之一应显示 layout 视口的宽度，在 iTouch 上应为 980px，在 Samsung Galaxy S2 上应为 800px。
.
。
代码
<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
Android 浏览器：
屏幕宽度：800
window.innerWidth: 800
客户端宽度：784
jQuery 宽度：800
Firefox Mobile（又名 Fennec）：
屏幕宽度：480
window.innerwidth: 980
客户端宽度：964
jQuery width: 980
Safari 结果当然可用，但 Android 浏览器的结果则不行。
具有讽刺意味的是，Firefox 移动端的结果却是准确的。尽管从用户角度来看它提供了良好的浏览体验，但对于移动设备来说它还不是一个足够大的目标，并且还有许多其他功能在此浏览器上无法正常工作。
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.
I've tried with screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth, and jQuery's $(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.
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.
.
.
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
Android Browser:
screen.width: 800
window.innerWidth: 800
clientWidth: 784
jQuery width: 800
Firefox Mobile (a.k.a. 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.
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.
发布评论
评论（3）
另一个 StackOverflow 问题将此作为解决方法：
如果您想要详细信息，您可以 阅读问题跟踪器中的错误。您遇到了 Android 2.2 和 2.3 中存在的错误。
Another StackOverflow question has this as a workaround:
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.
使用此>将
viewport的比例设置为1.0可能会有所帮助。标签：当我为移动应用程序创建响应式 HTML/CSS 布局时（我使用 CSS
@media查询），这为我解决了类似的问题。It may help to set the scale of the
viewportto1.0using this<meta> tag: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).您可以通过访问设备上的以下链接来了解各种视口宽度
http://ipad.atwebpages.com /viewport.html
这适用于桌面和移动浏览器。
只是补充一下，视口主要仅对移动设备有用...
You can find out the various viewport widths by accessing the following link on the device
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...