桌面上的innerWidth和outerWidth奇怪答案

【问题标题】：innerWidth and outerWidth oddness on desktop桌面上的innerWidth和outerWidth奇怪
【发布时间】：2017-05-24 16:11:27
【问题描述】：

在 google 上浏览了一下，发现了几篇关于移动设备上的功能的文章，但似乎没有任何东西可以解释上述观察结果。

【问题讨论】：

我基本上看到了同样的事情。不确定您所说的普通页面是什么意思，但我尝试过的网站在各自的浏览器中给出了相同的结果。我试过 SO、google.com 和 amazon.com。 Firefox 中的 (1920, 1936, 1920) 和 Chrome 中的 (1920, 1920, 1920) 所有 3 个网站。
outerWidth 实际上可以大于屏幕尺寸，如果有窗口镶边就在屏幕边缘之外..
我在使用 Chrome 时遇到了同样的问题：1422|1280|1280。这让我有点发疯，因为它影响了我的断点（使用innerWidth）。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

获取innerWidth 和outerWidth 是有区别的。看官方定义：

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

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

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

因此，当您的页面只是放大或放大页面视图时，outerWidth 可以小于 innerWidth。我认为您需要在页面中声明以下标签：

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

它会让您的页面在小视口中表现如预期（适合屏幕的宽度限制）。

innerWidth 较大的一个可能原因是脚本或样式可以更改窗口尺寸。

【讨论】：

【解决方案3】：

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

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

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

结论：

outerHeight 和outerWidth 考虑浏览器窗口大小而不是html 可见大小。因此，这些值可能会因浏览器而异，也可能因设备而异。此外，这些值可以大于设备屏幕本身。
innerWidth 值包括滚动（如果存在）。这意味着宽度值不仅指可见部分，还指左滚动量，可能大于 window.outerWidth。

【讨论】：