窗口大小大于屏幕大小？

Question

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

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

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

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

对于window.devicePixelRatio，我得到：0.8999999761581421

Answer 1

这是正确的行为。窗口对象表示浏览器中的打开窗口，而不是屏幕/监视器。以下是有关文档对象模式（DOM）中窗口对象的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window

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

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

Answer 2

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

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

Answer 3

还可以查看 viewport 元标题，如果您希望在移动设备上进行响应式行为，它会很有用。

如果您的 CSS 中有 @media 标签，这样的内容可以使您的网站正确缩放。

using Microsoft.Extensions.DependencyInjection;

在 MDN Docs 中有更多详细信息。