使用JavaScript或CSS检测缩放设置(dpi)

我注意到一台配有1920x1080屏幕的小型笔记本电脑,Windows 10会自动调整缩放比例.我看到它高达150%.有没有办法可以发现这个？我的媒体查询没有启动,因为它们是在px中设置的.

尝试访问window.devicePixelRatio变量.

Window属性devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率的比率.该值也可以解释为像素大小的比率:一个CSS像素的大小与一个物理像素的大小.简单来说,这告诉浏览器应该使用多少屏幕的实际像素来绘制单个CSS像素.

有关它的更多信息: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;
  }
}