9 javascript mobile android mobile-safari
是否有一致的方法来确定使用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.基于我一直在阅读的内容,其他一个数字应该显示布局视口的宽度,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 width:980
Android浏览器:
screen.width:800
window.innerWidth:800
clientWidth:784
jQuery width:800
Firefox Mobile(又名Fennec):
screen.width:480
window.innerwidth:980
clientWidth:964
jQuery width:980
Safari结果肯定是可用的,但不是Android浏览器的结果.
具有讽刺意味的是,Firefox移动结果是准确的.虽然从用户的角度来看它提供了很好的浏览体验,但它对于移动设备来说并不是一个足够大的目标,而且还有很多其他的东西在这个浏览器上不能很好地工作.
另一个 StackOverflow 问题将此作为解决方法：
setTimeout(YourFunction, 200);
如果您想了解详细信息，可以在问题跟踪器中阅读有关该错误的信息。您遇到了 Android 2.2 和 2.3 中存在的错误。
| 归档时间： |
|
| 查看次数： |
16766 次 |
| 最近记录： |