Question

我正在尝试解决使用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.

我哪里出错了？

Answer 1

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

大部分基础都是

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

和

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

希望这有帮助。

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

如果您将Microsoft Windows 7配置为显示大25％的文本，则Firefox会将您的屏幕报告为其实际大小的1 / 1.25倍。对于实际的1920年，这恰好是1536。

（即使画布中的矩形也被画得太大了25％。去过那里，发疯了。）

Answer 6

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

为什么window.innerWidth没有返回正确的值？

6 个答案: