Question

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

我已尝试使用screen.width，window.innerWidth，document.getElementByTagName("body")[0].clientWidth和jQuery $(window).width()。

Mobile Safari（来自ios 3.1.3（7E18），原版iPod touch）显示了有用的价值，但是Android浏览器（Android 2.3.7）并没有显示。

理想情况下，我认为screen.width应该显示屏幕的实际像素分辨率：iPod Touch上为320px，三星Galaxy S2上为480px。基于我一直在阅读的内容，其他一个数字应显示 layout 视口的宽度，iTouch上的亮度应为980px，三星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 ：
screen.width：320
window.innerwidth：980
clientWidth：964
jQuery宽度：980

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宽度：980

Safari结果肯定是可用的，但不是Android浏览器的结果。

具有讽刺意味的是，Firefox移动结果是准确的。虽然从用户的角度来看它提供了一个很好的浏览体验，但对于移动设备来说它并不是一个足够大的目标，而且还有很多其他的东西在这个浏览器上不能很好地工作。

Answer 1

使用此viewport＆gt;设置1.0到<meta的比例可能会有所帮助标记：

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>

当我为移动应用创建响应式HTML / CSS布局时（我使用CSS @media查询），这解决了类似的问题。

Answer 2

Another StackOverflow question将此作为解决方法：

setTimeout(YourFunction, 200);

如果您需要详细信息，可以read about the bug in the issue tracker。您遇到了Android 2.2和2.3中存在的错误。

Answer 3

您可以通过访问设备上的以下链接找到各种视口宽度

http://ipad.atwebpages.com/viewport.html

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

只需添加，视口主要仅适用于移动设备......

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

代码

结果

3 个答案: