如何使用Javascriptfind虚拟视口/屏幕宽度?

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

我试着用screen.widthwindow.innerWidthdocument.getElementByTagName("body")[0].clientWidth和jQuery的$(window).width()

移动Safari(从ios 3.1.3(7E18),原始的iPod touch)显示有用的价值,但股票Android浏览器(Android 2.3.7)没有。

理想情况下,我认为screen.width应该显示屏幕的实际像素分辨率:iPod Touch上的320px,Samsung Galaxy S2上的480px。 基于我一直在阅读的内容,其他数字之一应该显示布局视口的宽度,在iTouch上应该是980像素,在三星Galaxy S2上应该是800像素。 。

 <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
客户端宽度:784
jQuery的宽度:800

Firefox Mobile(aka Fennec)
screen.width:480
window.innerwidth:980
clientWidth:964
jQuery宽度:980

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

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

Solutions Collecting From Web of "如何使用Javascriptfind虚拟视口/屏幕宽度?"

另一个StackOverflow问题有这个解决方法:

 setTimeout(YourFunction, 200); 

如果您需要详细信息,可以阅读问题跟踪器中的错误 。 您遇到Android 2.2和2.3中存在的错误。

使用这个<meta >标签可能有助于将viewport的比例设置为1.0

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

这为我解决了类似的问题,当我为移动应用程序创build响应式HTML / CSS布局时(我正在使用CSS @media查询)。

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

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

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

只需添加,视口主要用于移动设备…