如何使用Javascript查找虚拟视口/屏幕宽度？

对于使用Javascript的移动设备，是否有一致的方法来确定屏幕和虚拟视口的宽度？我的目标平台是移动Safari和Android的股票浏览器，但我也在用Android上的其他浏览器进行测试

我试过使用

screen.width

，

window.innerWidth

，

document.getElementByTagName（“body”）[0].clientWidth

，以及jQuery的

$（window.width（）

MobileSafari（来自ios 3.1.3（7E18），原版iPodtouch）显示了有用的值，但股票Android浏览器（Android 2.3.7）没有

理想情况下，我认为screen.width应该显示屏幕的实际像素分辨率：iPodtouch为320px，三星Galaxy S2为480px。根据我所读到的，其他数字之一应该显示布局视口的宽度，在iTouch上应该是980px，在三星Galaxy S2上应该是800px。 .
.

代码

屏幕宽度：
window.innerwidth：
客户端宽度：
jQuery宽度：
window.onload=函数（）{
var swidth=屏幕宽度；
var wiwidth=window.innerWidth；
var cwidth=document.getElementsByTagName（“正文”）[0].clientWidth；
var jwidth=$（window.width（）；
document.getElementById（“屏幕宽度”）.innerHTML=swidth；
document.getElementById（“window\u innerwidth”）.innerHTML=wiwidth；
document.getElementById（“clientwidth”）.innerHTML=cwidth；
document.getElementById（“jquery_width”）.innerHTML=jwidth；
}

.
.

结果 iOS Safari：
屏幕宽度：320
window.innerwidth:980
客户宽度：964
jQuery宽度：980

安卓浏览器：
屏幕宽度：800
window.innerWidth:800
客户宽度：784
jQuery宽度：800

Firefox Mobile（又称Fennec）：
屏幕宽度：480
window.innerwidth:980
客户宽度：964
jQuery宽度：980

Safari的结果当然是可用的，但Android浏览器的结果却不可用

---

具有讽刺意味的是，Firefox移动版的结果是准确的。尽管从用户的角度来看，它提供了良好的浏览体验，但对于移动设备来说，它的目标还不够大，而且还有许多其他功能在该浏览器上无法正常工作。

使用此

标记将
视口的缩放比例设置为
1.0
：



这解决了我在为移动应用程序创建响应性HTML/CSS布局时遇到的类似问题（我使用CSS
@media
查询）。
您可以通过访问设备上的以下链接找到各种视口宽度


这适用于桌面和移动浏览器

要补充的是，viewport主要只对移动设备有用…
有以下解决方法：

setTimeout(YourFunction, 200);

如果你想知道细节，你可以。您遇到了Android 2.2和2.3中存在的错误。
我希望用户能够伸缩，所以我不想使用最小或最大伸缩。如果我使用初始缩放，可能会使页面很好地适应移动浏览器。我将用它和不同的内容块宽度进行实验。现在，我只是想弄清楚，在不使用UA嗅探的情况下，我能告诉你多少关于手机浏览器的信息。
<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>

setTimeout(YourFunction, 200);