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

Question

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

Answer 1

这并不是OP具体要求的，但我认为很多登陆这个问题的用户都会问。

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

方法

1. 首先，确保您正在rem对问题文本使用字体大小。
2. 现在，您可以通过根元素中的单个查询一次性缩放所有文本。mediahtml

这可以避免任何 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，则不必更改所有内容，只需对引起问题的文本进行更改即可。

编辑 - 辅助功能问题：用户首选项应始终放在第一位。为了响应 Windows 文本放大而缩小字体大小将是一种用户体验反模式，并且会对视障用户产生不成比例的影响。理想情况下，仅将此作为最后的手段。

Answer 2

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

对于任何研究这个问题的人，在 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+')');
}

例如，如果您有一个弹出窗口，并且无论显示缩放如何，都希望它看起来相同，则此方法效果很好