使用JavaScript或CSS检测比例设置（dpi） [英] Detect scale settings (dpi) with JavaScript or CSS

问题描述

我注意到，一台具有1920x1080屏幕的小型笔记本电脑，Windows 10会自动调整缩放比例。我看到它高达150％。有没有办法可以检测到这一点？

I've noticed that a small laptop with a 1920x1080 screen, windows 10 will auto adjust the scaling. I've seen it as high as 150%. Is there a way we can detect this? My media queries don't kick in as they're set in px.

推荐答案

尝试访问窗口.devicePixelRatio 变量。

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

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/zh- US / docs / Web / API / Window / devicePixelRatio

More info about it: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

您也可以将CSS resolution 用于此处，有关此内容的更多信息： https：//developer.mozilla .org / zh-CN / docs / Web / CSS / @ media / resolution

You could also use CSS resolution for this, more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

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

这篇关于使用JavaScript或CSS检测比例设置（dpi）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！