Javascript 桌面上的内宽和外宽奇怪

在chrome中打开控制台（打开时），在

innerWidth+“|”+outerWidth+“|”+屏幕中复制。width

，对我来说，这将返回

2133 | 1920 | 1920

，显然

innerWidth

大于

outerWidth

。。。似乎这还不够奇怪，我接下来尝试在firefox中运行此代码，它返回

1920 | 1936 | 1920

。很明显，我的

外套宽度

大于我的屏幕大小。（所有屏幕通常最大化）。奇怪的是，在“普通”页面上运行相同的代码（不是stackoverflow）会在chrome中返回

1920 | 1920 | 1920

，但是firefox仍然坚持我的

outerWidth

大于我的屏幕

---

你在谷歌上搜索过，找到了几篇关于移动设备功能的文章，但似乎没有任何东西可以解释上述观察结果。

一个原因是

innerWidth

可能比

outerWidth

大，那就是如果你的浏览器被放大了。在浏览器处于全屏模式时，我得到了以下结果：

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

---

唯一可以使

外径

大于

屏幕宽度的方法是通过拖动更改窗口宽度
 一个原因
innerWidth
可能大于
outerWidth
是如果浏览器被缩放。在浏览器处于全屏模式时，我得到了以下结果：

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

唯一可以使
外径
大于
屏幕宽度的方法是通过拖动更改窗口宽度
 获取内宽和外宽之间存在差异。
看看官方定义：

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

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

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

因此，当您的页面刚刚放大或页面视图放大时，外部宽度可能小于内部宽度。
我认为您需要在页面中声明以下标记：

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



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

较大的innerWidth的一个可能原因是可以更改窗口尺寸的脚本或样式。
获取innerWidth和outerWidth之间存在差异。
看看官方定义：

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

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

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

因此，当您的页面刚刚放大或页面视图放大时，外部宽度可能小于内部宽度。
我认为您需要在页面中声明以下标记：

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



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

而造成较大innerWidth的一个可能原因是可以更改窗口尺寸的脚本或样式。
如果我们采用

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

以及：

只读窗口属性innerWidth返回窗口的内部宽度
窗口以像素为单位。这包括垂直滚动条的宽度
如果有人在场的话，就请吧


结论：
outerHeight和outerWidth考虑了浏览器窗口大小，而不是html可见大小。因此，这些值可以在不同的浏览器和设备之间进行更改。此外，这些值可以大于设备屏幕本身
innerWidth值包括滚动条（如果存在）。这意味着“宽度”值不仅指可见部分，还指可能大于window.outerWidth的向左滚动量
如果我们采用

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

以及：

只读窗口属性innerWidth返回窗口的内部宽度
窗口以像素为单位。这包括垂直滚动条的宽度
如果有人在场的话，就请吧


结论：
outerHeight和outerWidth考虑了浏览器窗口大小，而不是html可见大小。因此，这些值可以在不同的浏览器和设备之间进行更改。此外，这些值可以大于设备屏幕本身
innerWidth值包括滚动条（如果存在）。这意味着“宽度”值不仅指可见部分，还指可能大于window.outerWidth的向左滚动量
我基本上看到了同样的事情。不知道你所说的普通页面是什么意思，但我尝试过的网站在各自的浏览器中给出了相同的结果。我试过了，google.com和amazon.com。（1920、1936、1920）和（1920、1920、1920）三个站点的Chrome浏览器。如果屏幕边缘有一个窗口Chrome浏览器，
outerWidth
实际上可能大于屏幕大小。我的Chrome浏览器也有同样的问题：
1422 | 1280 | 1280
。这让我有点发疯，因为它影响了我的断点（使用
innerWidth
）