Javascript window.innerWidth window.outerWidth 和有什么不一样？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12066093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between window.innerWidth window.outerWidth?
提问by John Hoffman
I examined the windowobject in Firebug. window.innerWidthand window.outerWidthare both 1230.
我检查了windowFirebug 中的对象。window.innerWidth并且window.outerWidth都是1230。
What is the difference between these two values?
这两个值有什么区别？
采纳答案by chucksmash
From Mozilla Developer Network:
来自 Mozilla 开发者网络：
window.outerWidth
window.outerWidth
window.outerWidth gets the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
window.outerWidth 获取浏览器窗口外部的宽度。它代表整个浏览器窗口的宽度，包括侧边栏（如果展开）、窗口镶边和窗口大小调整边框/手柄。
and
和
window.innerWidth
window.innerWidth
Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
浏览器窗口视口的宽度（以像素为单位），包括（如果呈现）垂直滚动条。
This is ostensibly how they work. A test page, however, shows they are both the same no matter how I resize them in Firefox 14.0.1 on Ubuntu 12.04. In Chromium, they return numbers that are 8 pixels different. Doing a bit of dead reckoning, it appears the window chrome on that particular app is about 4 pixels on the left side and 4 pixels on the right side and that this difference is being correctly picked up in that browser.
这表面上是他们的工作方式。然而，一个测试页面显示，无论我如何在 Ubuntu 12.04 上的 Firefox 14.0.1 中调整它们的大小，它们都是相同的。在 Chromium 中，它们返回相差 8 个像素的数字。进行一些航位推算，似乎该特定应用程序上的窗口镶边在左侧约 4 个像素，在右侧约 4 个像素，并且该差异在该浏览器中被正确识别。
Code for the test page I used:
我使用的测试页面的代码：
<!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>
回答by Snowball
Check the Mozilla reference for window.innerWidthand window.outerWidth. If your operating system/window manager has them, window.outerWidth includes the window borders, resizing handles, and sidebars.
检查window.innerWidth和window.outerWidth的 Mozilla 参考。如果您的操作系统/窗口管理器有它们， window.outerWidth 包括窗口边框、调整大小的手柄和侧边栏。
Try opening the bookmarks or history sidebar, then trying that again in Firebug.
尝试打开书签或历史侧边栏，然后在 Firebug 中再次尝试。
