窗口大小大于屏幕大小？

Question

当我在 Chrome 浏览器中使用 JavaScript 检查 screen.width 时，它会报告 1920，这是我预期的结果。如果我将 Chrome 窗口拖到屏幕的全宽并检查 $(window).width()，我得到 2133？？？浏览器使用自己的单位吗？

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

根据请求，以下是代码（在 JavaScript 控制台中）：

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

对于 window.devicePixelRatio，我获得的值是：0.8999999761581421

- Michael McCrickard

---

你能提供你的检查代码吗？ - margarita

window.devicePixelRatio的输出是什么？ - gus27

当您移动窗口时，是否可能使其恢复正常宽度（就像手动调整大小一样，比屏幕最大值2133更大），并且在全屏时将其拉伸到最大默认值（1920）？ - David Lampon

这就是答案：2133 * 0.89999 = 1920。 - gus27

我猜我可以查一下 - 但有人能简要告诉我window.devicePixelRatio是什么吗？我的意思是，这显然是窗口像素和屏幕像素之间的比率，但为什么要有两个不同的单位呢？ - Michael McCrickard

Answer 1

这是正确的行为。window对象代表浏览器中打开的窗口，而不是您的屏幕/显示器。这里有更多关于文档对象模型（DOM）中window对象的信息：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

特别地，这个问题涉及到window.devicePixelRatio，正如@gus27所指出的：

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

- Nikhil Dèvrè

Answer 2

除了@NikhilDevre之外，我想提醒大家，在桌面浏览器上，devicePixelRatio可以受到您在浏览器中设置的缩放因素的影响：

在Chrome中设置缩放因素为90％，您将获得devicePixelRatio为0.8999。

- gus27

---

有趣。我的页面缩放设置为100%。但是如先前所述，我的devicePixelRatio为0.8999。 - Michael McCrickard

如果您使用的是Mac，也许这个链接可以帮到您：http://apple.stackexchange.com/questions/33444/how-do-you-reset-screen-zoom-to-zero - gus27

真有帮助！我没意识到那些缩放控件在辅助功能下面。 - Michael McCrickard

Answer 3

同时也要看一下视口元头，如果您想在移动设备上实现响应式行为，这将非常有用。

如果您的CSS中有@media标签，拥有类似这样的东西可以使您的网站正确缩放。

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

更多细节请参考MDN文档。

- Altair7852