Window尺寸大于屏幕尺寸？

Question

当我在 Chrome 浏览器中使用 javascript 检查 screen.width 时，它报告 1920，这正是我所期望的。如果我将 Chrome window 拖到屏幕的整个宽度并检查 $(window).width()，我得到 2133？？？浏览器是否使用它自己的单位？

我正在研究一些 HTML/CSS 布局，并试图使它们在不同的屏幕分辨率和浏览器 window 大小下保持一致，但我遇到了一些问题，所以我想尝试更好地理解这个问题。

根据要求，这里是代码（在 javascript 控制台中）：

screen.width()
$(window).width()

对于window.devicePixelRatio，我得到：0.8999999761581421

Answer 1

这是正确的行为。 window 对象表示浏览器中打开的 window，而不是您的 screen/monitor。以下是有关文档对象模态 (DOM) 中 window 对象的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window

特别是，这个问题与 window.devicePixelRatio 有关，正如 @gus27 所指出的：

Answer 2

除了@NikhilDevre，我想提一下，在桌面浏览器上，devicePixelRatio 可能会受到您在浏览器中设置的缩放系数的影响：

使用 Chrome 并将缩放系数设置为 90%，您将获得 devicePixelRatio 0.8999。

Answer 3

另请查看 viewport meta header，如果您希望在移动设备上有响应行为，这很有用。

如果您有@media 标签，拥有这样的内容可以使您的网站适当扩展CSS。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

MDN Docs 中有更多详细信息。

Window size is larger than screen size?