为什么 window.innerWidth 不返回正确的值？答案

【问题标题】：Why isn't window.innerWidth returning the right value?为什么 window.innerWidth 不返回正确的值？
【发布时间】：2014-04-02 12:30:15
【问题描述】：

我正在尝试解决使用 Javascript 来确定浏览器“窗口”宽度的问题。我知道在这种情况下，不同的人可能意味着不同的东西，所以具体来说，我指的是绿色区域，如this 帖子中的区域。

我已经阅读了对该帖子的前两个回复以及针对此问题的许多其他 stackoverflow 解决方案，但没有一个我可以开始工作：我正在使用 Firefox 27.0.1 并在显示器上最大化窗口1920 像素宽。脚本说我的视口是 1536 像素宽。我预计是 1920 年（或接近）。

根据我所见，在我看来，最简单的解决方案是以下代码：

<html>
<head>
<script type="text/javascript">
function onAfterLoad() {
    document.write('<p>Your viewport width is '+window.innerWidth+'</p>');
}
</script>
</head>
<body onload="onAfterLoad();">
</body>
</html>

在编写此代码时是here。这也说明我的视口是 1536 像素宽，而我认为它应该是 1920。

请问我哪里出错了？

【问题讨论】：

标签： javascript html width viewport

【解决方案1】：

我认为你应该尝试使用 jQuery Dimension Functions. 而不是处理 Javascript 函数。

大多数基础是

$(window).width()（获取浏览器宽度）

和

$(window).height()（获取浏览器高度）

希望这会有所帮助。

【讨论】：

我不知道如何使用 jQuery 语法来做到这一点。我的明显猜测 kilgore.org.uk/surfing/fixed5.html 给了我一个空白页。

【解决方案2】：

首先：
您确定这是您的视口宽度吗？你想获取浏览器窗口的宽度还是整个屏幕的宽度？如果你想获得整个屏幕的宽度，这在 JavaScript 中是不可能的。
其次：
试试这个来获取浏览器窗口的宽度：

function GetWidth()
{
var width = document.body.clientWidth;
document.write('<p>Your viewport width is '+width+'</p>')
}

【讨论】：

感谢您的建议，但这似乎没有任何区别 - 请参阅 kilgore.org.uk/surfing/fixed4.html
我忘了补充，在回答你的问题时，是的，这是我想要得到的浏览器窗口的宽度。
@user1476044 我不久前读到innerWidth 在跨浏览器时遇到了一些问题。但正如我上面所说的 TRY。它在那个网站上工作！他们使用document.body.clientWidth。
@user1476044 顺便说一下，Viral Shah 的例子是这样工作的，你忘了像这样引用 jQuery 的库：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">你有来添加这个所以 jQuery 工作！
感谢对fixed5.html的更正，但页面仍然是空白的。另外，我不明白您所说的 TRY 是什么意思。你认为我没有尝试过什么？

【解决方案3】：

你的代码很适合我。它说 1600（我有一个 1600 x 900 的屏幕）。调用代码时浏览器是否最大化？也许您的分辨率是 1536 x 左右，而您的屏幕被拉长了？我会在你的屏幕设置中查看它。另一种尝试方法是打开 Chrome 和 Devtools，然后调整浏览器的大小。它将显示浏览器窗口的尺寸。

【讨论】：

浏览器窗口最大化，屏幕为 1920 像素宽。我试过 Chrome/Devtools，它说我的窗口是 1740 宽，8 像素边框，总共 1756。更近了，但还没有雪茄。

【解决方案4】：

例如，如果您将 Microsoft Windows 7 配置为显示大 25% 的文本，那么 Firefox 会报告您的屏幕是实际大小的 1/1.25 倍。实际的 1920 年正好是 1536 年。

（即使画布中的矩形也被绘制了 25% 太大了。去过那里，疯了。）

【讨论】：

【解决方案5】：

检查您的视口元标记。应该是：

<meta name="viewport" content="width=device-width,initial-scale=1" />

【讨论】：

【解决方案6】：

对我来说，这个问题是浏览器缩放的结果。尝试控制+滚轮，看看这是否会改变你得到的结果。如果是这样，请参阅How to detect page zoom level in all modern browsers?

【讨论】：

这也为我解决了

【解决方案7】：

Windows 11 机器解决方案
转到设置 > 显示 > 缩放和布局，并将其更改为 100%，
之后，您应该会看到屏幕分辨率作为代码输出，
注意：不建议这样做，因为您会遇到难以阅读的文字大小。
说明
某些系统（如 Windows）会缩放应用视口，这是因为现在屏幕的每英寸像素值更密集，因此文本会很小。
为了更深入地了解，假设一个典型的笔记本电脑屏幕宽度为 14 英寸，宽度为 1920 像素。
如果您将字体设置为 20 像素，那么您的文本将具有以下大小：
以英寸为单位的文本大小 = 以像素为单位的字体大小 * 以英寸为单位的屏幕宽度 / 屏幕像素。
因此，如果您进行数学计算，它将是：
英寸文本大小 = 20 * 14 / 1920 = .1458333...英寸。
所以它真的非常小，因此系统倾向于将这些屏幕缩放 125%，也就是说，在你的情况下，你的屏幕宽度将是 = 1920 / 125% = 1536 px
推荐
你应该调整你的代码以适应任何屏幕分辨率

【讨论】：