桌面上的innerWidth和outerWidth奇怪

Question

在Chrome中打开控制台（在SO上）并复制到innerWidth + "|"+outerWidth + "|" + screen.width，对我来说，这将返回2133|1920|1920，显然innerWidth大于outerWidth。 ..好像这不够奇怪我接下来尝试在firefox中运行此代码并返回1920|1936|1920。显然我的outerWidth大于我的屏幕尺寸。 （所有屏幕通常最大化）。奇怪的是，在正常情况下运行相同的代码＆＃39;页面（不是stackoverflow）将在chrome，firefox中返回1920|1920|1920，但仍然坚持我的outerWidth大于我的屏幕。

浏览了一下谷歌，发现了一些关于移动设备功能的文章，但似乎没有任何解释上述观察结果。

Answer 1

innerWidth可能大于outerWidth的一个原因是您的浏览器已缩放。我在浏览器中以全屏模式获得了以下结果：

zoom  inner  outer
75%   1706   1280
90%   1422   1280
100%  1280   1280
110%  1164   1280

我outerWidth大于screen.width的唯一方法是通过拖动更改窗口宽度。

Answer 2

获取innerWidth和outerWidth之间存在差异。 看官方定义：

  

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

     

Window.outerWidth： outerWidth属性必须返回客户端窗口的宽度。

正如您所见，innerWidth已绑定到视口宽度，而outerWidth已绑定到浏览器窗口宽度。

因此，当您的网页刚刚放大或页面视图按比例放大时， outerWidth 可以小于 innerWidth 。 我认为您需要在页面中说明完整的标记：

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

它会使您的页面在小视口中按预期运行（适合屏幕的宽度限制）。

因为大内宽的一个可能原因是可以改变窗口尺寸的脚本或样式。

Answer 3

如果采用window.outerWidth:的MDN定义

Window.outerWidth只读属性返回外部的宽度 浏览器窗口的它代表整个浏览器的宽度 包含侧边栏（如果已展开），窗口镶边和窗口的窗口 调整边框/句柄的大小。

对于window.innerWidth：

只读的Window属性innerWidth返回的内部宽度 以像素为单位的窗口。这包括垂直滚动的宽度 如果有一个，则显示出来。

结论：

1. outerHeight和outerWidth考虑了浏览器窗口的大小，而不考虑html的可见大小。因此，这些值可以在浏览器之间和浏览器之间以及设备之间变化。而且，这些值可以大于设备屏幕本身。
2. innerWidth值包括滚动（如果存在）。这意味着宽度值将不仅指可见部分，而且还指可能比window.outerWidth大的向左滚动量。