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

【问题标题】：How do I find the virtual viewport/screen width using Javascript?如何使用 Javascript 找到虚拟视口/屏幕宽度？
【发布时间】：2023-04-04 11:56:01
【问题描述】：

是否有一致的方法来确定使用 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 上为 320 像素，在三星 Galaxy S2 上为 480 像素。根据我一直在阅读的内容，其他数字之一应该显示 layout 视口的宽度，在 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：
屏幕宽度：320
window.innerwidth: 980
客户端宽度：964
jQuery 宽度：980

Android 浏览器：
屏幕宽度：800
window.innerWidth: 800
客户端宽度：784
jQuery 宽度：800

Firefox 移动版（又名 Fennec）：
屏幕宽度：480
window.innerwidth: 980
客户端宽度：964
jQuery 宽度：980

Safari 的结果肯定可以用，但 Android 浏览器的结果不行。

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

【问题讨论】：

标签： javascript android mobile mobile-safari

【解决方案1】：

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

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

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

补充一点，视口主要仅对移动设备有用...

【讨论】：

【解决方案2】：

Another StackOverflow question 有这个解决方法：

setTimeout(YourFunction, 200);

如果您想了解详细信息，可以read about the bug in the issue tracker。您遇到了 Android 2.2 和 2.3 中存在的错误。

【讨论】：

【解决方案3】：

使用此<meta> 标签将viewport 的比例设置为1.0 可能会有所帮助：

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

当我为移动应用程序创建响应式 HTML/CSS 布局时（我使用 CSS @media 查询），这为我解决了类似的问题。

【讨论】：

我希望用户能够缩小或缩小，所以我不想使用最小或最大比例。如果我使用初始比例，那可能会让页面很好地适应移动浏览器。我将尝试不同的内容块宽度。现在我只是想弄清楚我可以在不诉诸 UA 嗅探的情况下了解多少关于移动浏览器的信息。