Question

我检查了Firebug中的window对象。 window.innerWidth和window.outerWidth都是1230。

这两个值有什么区别？

Answer 1

来自Mozilla开发者网络：

window.outerWidth

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

和

window.innerWidth

浏览器窗口视口的宽度（以像素为单位），包括if 渲染，垂直滚动条。

这表面上看起来是如何运作的。但是，测试页面显示无论我如何在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>

Answer 2

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

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

window.innerWidth window.outerWidth有什么区别？

2 个答案: