javascript - 为什么 document.documentElement.clientHeight 因站点而异？

Question

我想知道我的 Chrome 浏览器中的视口(viewport)大小是多少。因此，我转到特定页面，例如 stackoverflow.com，然后打开控制台并键入:

document.documentElement.clientHeight 输出 597 document.documentElement.clientWidth 输出 1229

然后我访问另一个页面，例如 google.com。使用相同的浏览器(我只是打开一个新标签):

document.documentElement.clientHeight 输出 525 document.documentElement.clientWidth 输出 1093

我想知道为什么会这样？这不是应该给我视口(viewport)吗？或者换句话说，我看到的页面大小(没有滚动)？

我拍了两张截图(使用 Firefox 也是一样):

http://prntscr.com/20s6k9 http://prntscr.com/20s6vt

Answer 1

结果以 CSS 像素为单位。从屏幕截图来看，页面有不同的缩放设置，这意味着视口(viewport)高度和宽度是不同数量的 CSS 像素。

请注意，两个页面的纵横比相同，均为 3.16:1。