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

2019-10-05 19:29:03 阅读：210 来源： 互联网

标签：android javascript mobile mobile-safari

是否有一致的方法来确定使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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