【发布时间】：2020-12-14 09:37:47
【问题描述】：
根据Windows中的Display Setting，我笔记本的屏幕分辨率是1920 x 1080。当我打开浏览器并使用开发者工具检查浏览器的宽度时，它会显示1536 px。为什么它们不同？ 硬件像素和软件像素（CSS像素）之间的区别in this article:
当 Apple 率先推出 Retina 显示屏时，他们将 像素的概念分为硬件像素和软件像素。一个硬件 像素是显示器中的单个光点。一个软件像素， 在网络世界中也称为 CSS 像素，是一种度量单位。
【问题讨论】：
-
我也遇到过这种情况，问题是我在放大。你能检查一下你的缩放是100%吗？
-
@madjaoue，感谢您的建议，但是不，缩放是 100%
-
在这种情况下，请检查
window.devicePixelRatio是否等于1。这应该会给出 Retina 显示器使用的比率。例如，在我的三星手机中，它是 4。然后window.screen应该会为您提供浏览器所看到的屏幕的实际尺寸。 -
@madjaoue，非常感谢！
window.screen.availWidth是1536和window.devicePixelRatio是1.25，所以要计算实际宽度，我乘以1536 x 1.25并得到与display settings报告匹配的1920。所以确实是硬件像素和软件像素的区别。你能把它作为答案吗？ -
如果您的缩放比例是 100%，那么是的，这是由于硬件像素和软件像素造成的。很高兴它解决了你的问题。那我就把它作为答案。
标签： css