39

我检查了windowFirebug 中的对象。window.innerWidth并且window.outerWidth都是1230。

这两个值有什么区别？

4

2 回答 2

27

来自 Mozilla 开发者网络：

window.outerWidth

window.outerWidth 获取浏览器窗口外部的宽度。它表示整个浏览器窗口的宽度，包括侧边栏（如果展开）、窗口镶边和窗口大小调整边框/句柄。

和

window.innerWidth

浏览器窗口视口的宽度（以像素为单位），包括（如果呈现）垂直滚动条。

表面上这就是他们的工作方式。然而，一个测试页面显示，无论我如何在 Ubuntu 12.04 上的 Firefox 14.0.1 中调整它们的大小，它们都是相同的。在 Chromium 中，它们返回的数字相差 8 个像素。进行一些航位推算，看起来该特定应用程序上的窗口镶边在左侧大约 4 像素，在右侧大约 4 像素，并且在该浏览器中正确拾取了这种差异。

我使用的测试页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>12066093</title>
    <meta charset="utf-8">
</head>
<body>
<div style="width:2000px; height: 2000px;">hi</div>
<script type="text/javascript">
    alert("window.innerWidth: " + window.innerWidth + "\nwindow.outerWidth: " + window.outerWidth);
</script>
</body>
</html>
于 2012-08-22T04:08:09.843 回答
2

检查 Mozilla 对window.innerWidth和window.outerWidth的参考。如果您的操作系统/窗口管理器有它们，window.outerWidth 包括窗口边框、调整大小手柄和边栏。

尝试打开书签或历史侧边栏，然后在 Firebug 中再次尝试。

于 2012-08-22T04:01:21.250 回答