使用 JavaScript 或 CSS 检测比例设置 (dpi)答案

【问题标题】：Detect scale settings (dpi) with JavaScript or CSS使用 JavaScript 或 CSS 检测比例设置 (dpi)
【发布时间】：2017-10-17 13:12:21
【问题描述】：

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

【问题讨论】：

标签： javascript css

【解决方案1】：

尝试访问window.devicePixelRatio 变量。

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

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

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

【讨论】：

请在您的答案中添加更多信息，以便可以更好地帮助其他用户...也许一些链接...
当然，用 MDN + 链接的一些描述更新了我的答案
我还添加了关于可能的纯 CSS 解决方案的注释
更好。我有一个奇怪的边缘案例，在小型笔记本电脑上导航飞出，并且像素比高于正常水平，导致侧滚动。
仅供参考 - 我的缩放比例为 150% (window.devicePixelRatio = 1.5)，但 CSS 仅适用于 144dpi - @media (resolution: 144dpi)。不知道为什么。所以，我建议使用@media (min-resolution: 125dpi) 之类的东西来处理这个问题。

【解决方案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+')');
}

例如，如果您有一个弹出窗口并且您希望它看起来相同而不管显示缩放，这很有效

【讨论】：

【解决方案3】：

这并不是 OP 专门要求的，但我认为很多登陆这个问题的用户会问什么..

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

方法

首先，确保您使用rem 来调整问题文本的字体大小。 rem 专为这种情况而设计。
现在您可以使用来自根 html 元素的单个 media 查询一次缩放 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，则不必更改所有内容，只需对引起问题的文本进行更改即可。

【讨论】：

方法

HTML 根媒体查询

rem 字体大小

`rem` 字体大小