如何使用Javascript找到虚拟视口/屏幕宽度？
作者：互联网
是否有一致的方法来确定使用Javascript的移动设备的屏幕宽度和虚拟视口？我的目标平台是移动Safari和Android的股票浏览器,但我也在测试Android上的其他浏览器.
我试过使用screen.width,window.innerWidth,document.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,三星Galaxy S2上为480px.基于我一直在阅读的内容,其他一个数字应该显示布局视口的宽度,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移动结果是准确的.虽然从用户的角度来看它提供了很好的浏览体验,但对于移动设备而言,它并不是一个足够大的目标,而且还有很多其他的东西在这个浏览器上不能很好地工作.
解决方法:
Another StackOverflow question将此作为解决方法：
setTimeout(YourFunction, 200);
如果您需要详细信息,可以使用read about the bug in the issue tracker.您遇到了Android 2.2和2.3中存在的错误.
标签：android,javascript,mobile,mobile-safari 来源： https://codeday.me/bug/20191005/1857384.html