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

2023-09-05 06:15:31 作者：学渣要逆袭!

有没有一种统一的方法来确定屏幕和虚拟视使用Javascript的移动设备的宽度是多少？我的目标平台是移动Safari和Android的股票浏览器，但我也对Android的其他浏览器测试。

Is there a consistent way to determine the width of the screen and virtual viewport for mobile devices using Javascript? My target platforms are mobile Safari and Android's stock browser, but I'm also testing with other browsers on Android.

我试着 screen.width ， window.innerWidth ，文件。 getElementByTagName（身体）[0] .clientWidth 和jQuery的 $（窗口）.WIDTH（）。

I've tried with screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth, and jQuery's $(window).width().

移动Safari浏览器（从IOS 3.1.3（7E18），原来的iPod touch）显示有用的值，但股票Android浏览器（安卓2.3.7）没有。

Mobile Safari (from ios 3.1.3(7E18), original iPod touch) shows useful values, but the stock Android browser (Android 2.3.7) doesn't.

在理想情况下，我认为screen.width应该显示的实际像素分辨率的屏幕：在iPod Touch和480px的三星Galaxy S2 320PX。基于我一直在读书，其他的号码中的一个应该显示的布局宽度的视口应该是980px的iTouch的和800px的三星Galaxy S2。。照片。

Ideally, I think that screen.width should show the actual pixel resolution of the screen: 320px on the iPod Touch and 480px on the Samsung Galaxy S2. Based on what I've been reading, one of the other numbers should show the width of the layout viewport which should be 980px on the iTouch and 800px on the Samsung Galaxy S2. . .

<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

iOS Safari: screen.width: 320 window.innerwidth: 980 clientWidth: 964 jQuery width: 980

Android浏览器： screen.width：800 window.innerWidth：800 clientWidth：784 jQuery的宽度：800

Android Browser: screen.width: 800 window.innerWidth: 800 clientWidth: 784 jQuery width: 800

Firefox移动（又名小狐）： screen.width：480 window.innerwidth：980 clientWidth：964 jQuery的宽度：980

Firefox Mobile (a.k.a. Fennec): screen.width: 480 window.innerwidth: 980 clientWidth: 964 jQuery width: 980

Safari的结果当然是可用的，而不是Android浏览器的结果。

The Safari results are certainly useable, but not the Android Browser's results.

这是具有讽刺意味的是，火狐移动的结果是准确的。虽然它提供了从用户的角度来看一个很好的浏览体验，它不是一个足够大的目标为移动设备，有许多不上这个浏览器工作良好其他的事情。

It's ironic that the Firefox mobile results are accurate. Although it provides a nice browsing experience from a user perspective, it's not a big enough target for mobile devices and there are many other things that don't work well on this browser.

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

推荐答案