桌面上的innerWidth和outerWidth奇怪 [英] innerWidth and outerWidth oddness on desktop

问题描述

（在SO上）打开控制台，并拷贝到 innerWidth +|+ outerWidth +| + screen.width ，对我来说，这将返回 2133 | 1920 | 1920 ，显然是 innerWidth 大于 outerWidth ...如果这不够奇怪，我接下来尝试在firefox中运行此代码，并返回 1920 | 1936年| 1920 。可以看出我的 outerWidth 大于我的屏幕大小。 （所有的屏幕通常都是最大化的）。奇怪的是，在普通页面（而不是stackoverflow）上运行相同的代码会在chrome中返回 1920 | 1920 | 1920 ，但是仍然坚持我的外部宽度大于我的屏幕。

浏览了google，发现了一些关于移动设备功能的文章，解释任何上述观察。

解决方案 大于 outerWidth 就是您的浏览器放大。在全屏模式下，浏览器得到了以下结果：

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

我可以通过拖动来改变窗口的宽度，使得 outerWidth 大于 screen.width 。

Open the console in chrome (whilst on SO) and copy in innerWidth + "|"+outerWidth + "|" + screen.width, for me this will return 2133|1920|1920, apparantly the innerWidth is greater than the outerWidth... As if this isn't strange enough I next tried running this code in firefox and it returns 1920|1936|1920. Apparantly my outerWidth is greater than my screen size. (All screens were normally maximized). Strangely enough running the same code on a 'normal' page (not stackoverflow) will return 1920|1920|1920 in chrome, firefox however still insists my outerWidth is greater than my screen.

Have looked around on google, found a couple of articles regarding the functionality on mobile devices, but nothing seems to explain any of the above observation.

解决方案

One reason innerWidth could be larger than outerWidth is if your browser is zoomed. I got the following results with the browser in fullscreen mode:

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

The only way I could get outerWidth to be larger than screen.width is by changing the window width by dragging.

这篇关于桌面上的innerWidth和outerWidth奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！