桌面上的innerWidth和outerWidth奇怪

Question

用chrome打开控制台(同时在SO上)并复制innerWidth + "|"+outerWidth + "|" + screen.width,对我来说这将返回2133|1920|1920,显然innerWidth它比outerWidth... 更好......好像这不够奇怪我接下来尝试在firefox中运行此代码并返回1920|1936|1920.显然我的outerWidth屏幕尺寸大于我的尺寸.(所有屏幕通常最大化).奇怪的是,在'普通'页面(而不是stackoverflow)上运行相同的代码将返回1920|1920|1920chrome,但Firefox仍然坚持我outerWidth的大于我的屏幕.

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

Answer 1

一个原因innerWidth可能比outerWidth浏览器缩放时更大.我在浏览器中以全屏模式获得了以下结果:

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

我可以变得outerWidth更大的唯一方法screen.width是通过拖动来改变窗口宽度.

Answer 2

内部宽度和外部宽度之间的区别。查看官方定义：

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

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

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

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

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

这将使您的页面在小视口中表现出预期的效果（适合屏幕的宽度限制）。

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