使用JavaScript或CSS检测缩放设置（dpi）

Question

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

Answer 1

尝试访问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;
  }
}

Answer 2

对于任何对此感兴趣的人，只要在Martin Adamek的答案上有所建树，您都可以在jQuery中进行此操作并使用CSS转换来缩放某些内容：

// if the user has display scaling active, scale with CSS transform    
if (window.devicePixelRatio !== 1){
    let scaleValue = (1/window.devicePixelRatio);
    $('#containerToBeScaled').css('transform','scale('+scaleValue+')');
}

例如，如果您有一个弹出窗口，并且希望无论显示比例如何，它看起来都一样，这会很好用

Answer 3

这并不是 OP 所特别要求的，但我认为很多登陆这个问题的用户都会问..

<块引用>

Windows 10 中 150% 的文本缩放会破坏我的网页，我该怎么办？

方法

1. 首先，确保您使用 rem 来调整问题文本的字体大小。 rem 专为这种情况而设计。
2. 现在，您可以使用来自根 media 元素的单个 html 查询一次缩放 ALL 文本。

这避免了任何不可避免地导致模糊结果的 CSS 变换缩放。

HTML 根媒体查询

    /* Handle 125% and 150% Windows 10 Font Scaling on 96dpi monitors */
    @media (min-resolution: 120dpi) {
        html {
             font-size: 80%;
        }
    }

根据您的喜好调整 80%，更少 = 更小的文本

注意：请注意，150% 缩放并不意味着 150dpi。大多数显示器是 72dpi 或 96dpi。因此，150% 缩放意味着您要查询的最小分辨率为 108dpi 或 144dpi。

rem 字体大小调整

并确保您使用 rem 作为字体，例如：

    p {
        font-size: 1rem;
    }

如果您使用的是 px，则无需更改所有内容，只需针对导致问题的文本进行更改即可。