Javascript window.innerWidth window.outerWidth之间有什么区别?

Javascript window.innerWidth window.outerWidth之间有什么区别?,javascript,Javascript,我检查了Firebug中的窗口对象窗口。内部宽度和窗口。外部宽度都是1230 这两个值之间有什么区别?检查Mozilla参考资料中的和。如果您的操作系统/窗口管理器有,window.outerWidth包括窗口边框、调整大小句柄和侧栏 尝试打开书签或历史边栏,然后在Firebug中再次尝试。来自Mozilla开发者网络: 窗宽 window.outerWidth获取浏览器窗口外部的宽度。 它表示整个浏览器窗口(包括侧栏)的宽度 (如果展开)、窗口镀铬和窗口大小调整边框/控制柄 及 窗口宽度 浏览

我检查了Firebug中的
窗口
对象<代码>窗口。内部宽度和
窗口。外部宽度
都是
1230


这两个值之间有什么区别?

检查Mozilla参考资料中的和。如果您的操作系统/窗口管理器有,window.outerWidth包括窗口边框、调整大小句柄和侧栏


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

来自Mozilla开发者网络:

窗宽

window.outerWidth获取浏览器窗口外部的宽度。 它表示整个浏览器窗口(包括侧栏)的宽度 (如果展开)、窗口镀铬和窗口大小调整边框/控制柄

窗口宽度

浏览器窗口视口的宽度(以像素为单位),包括 渲染,垂直滚动条

从表面上看,这就是它们的工作方式。然而,一个测试页面显示,无论我在Ubuntu12.04上的Firefox14.0.1中如何调整它们的大小,它们都是相同的。在Chromium中,它们返回8个不同像素的数字。做了一点航位推算后,该特定应用程序上的window chrome左侧约为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>

12066093
你好
警报(“window.innerWidth:+window.innerWidth+”\nWindows.outerWidth:+window.outerWidth);

但在每种情况下,我都能看到
窗口。内宽
窗口。外宽
是相等的!!对于后代:
window.innerWidth
window.outerWidth
如果放大或缩小,则会有所不同
innerWidth
将显示窗口的缩放宽度,而
outerWidth
将不考虑缩放。假设您有一个1000像素宽的未缩放窗口。
innerWidth
outerWidth
将计算为1000。如果缩放到150%(放大屏幕内容),
innerWidth
将变为667(1000/1.5),
outerWidth
将保持在1000。此外,如果打开开发工具,它们也会有所不同。@mtoor我跟踪了一个小时,因为缩放级别意外设置为110%。不足以引起注意,但足以抛出媒体查询并中断响应。当您打开devtools并选择响应视口时,
outerwidth
是响应视口的宽度,
innerwidth
是窗口的宽度,包括响应视口外部但窗口内部的死区(在停靠开发工具时观察)