javascript - 使用 JavaScript 或 CSS 检测比例设置 (dpi)

Question

我注意到带有 1920x1080 屏幕的小型笔记本电脑，Windows 10 会自动调整缩放比例。我见过它高达 150%。我们有办法检测到这一点吗？我的媒体查询没有启动，因为它们是以 px 为单位设置的。

Answer 1

尝试访问 window.devicePixelRatio 变量。

The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

您也可以为此使用 CSS resolution，更多信息请点击此处:https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}