Question

我想找到CSS像素和设备像素之间的比率。

编辑：我应该意识到这只是缩放级别。我added an answer有关缩放级别的规范参考。

CSS像素是我们几乎用于所有事物的单位 - 它是element.style.width，element.clientWidth，element.offsetWidth等的含义。设备像素是浏览器实际绘制的像素。在设备像素中测量一些属性，例如， window.screen.width，这是用户放大时不会改变的屏幕大小（例如1024）。

动机：当用户放大时，我想增加画布的宽度和高度（同时保持style.width和style.height相同的CSS像素值），scale（）上下文，并在更加清晰的放大画布上重绘

我已阅读Quirksmode's A Tale of Two Viewports和High DPI on Surfin' Safari，但他们都没有说出如何获得比率。我到目前为止唯一的想法是收集mousemoves并测量event.clientX中的更改除以event.screenX中的更改，或者使用moz--min-device-pixel-ratio以编程方式创建媒体查询，使用getComputedStyle()来测试规则是否正确匹配，并通过二分搜索缩小范围。我希望有一种更容易/更可靠的方式。

修改：我尝试在Chrome，Safari和Firefox 4上使用@media (-webkit-min-device-pixel-ratio:1)查询，显然Webkit将该属性视为屏幕像素的常量设备像素比率（不随缩放而变化），而Firefox 4将其视为 CSS像素比率的设备像素（放大时会增加）。所以在Firefox 4中，我可以使用二进制搜索发现CSS像素/设备像素比率，但不能使用Webkit。

Answer 1

您可以在基于Webkit的浏览器中使用window.devicePixelRatio直接在JavaScript中获取设备像素比率。我在Google Chrome，Android浏览器（2.2+）和Mobile Safari上使用过此功能。我不知道其他浏览器。

Answer 2

您始终可以使用以下方法，它可以在所有浏览器中使用

window.getDevicePixelRatio = function () {
    var ratio = 1;
    // To account for zoom, change to use deviceXDPI instead of systemXDPI
    if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI       !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
        // Only allow for values > 1
        ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
    }
    else if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    return ratio;
};

Answer 3

有一个更好的CSS / JS解决方案：

/** sample media query for pixel-ratio=2" **/
@media  
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  .pixel-ratio-holder:before {
   content: "2";
  }
}


function jsPixelRatio(){
   return window.getComputedStyle(document.querySelector('.pixel-ratio-holder'), 'before').getPropertyValue('content').replace(/[^a-z]/g,'') * 1;
}

Answer 4

如何获取设备像素比

本示例使用window.devicePixelRatio作为起始点 AND ，还使用window.matchMedia() Web API作为后备计算。

浏览器对这两个功能的支持都非常好，因此这在大多数用例中都应该很好用。

这里是一个检索此信息的函数，originally written by PatrickJS and published as a GitHub Gist：

function getDevicePixelRatio() {
    var mediaQuery;
    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

    if (window.devicePixelRatio !== undefined && !is_firefox) {
        return window.devicePixelRatio;
    } else if (window.matchMedia) {
        mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
          (min--moz-device-pixel-ratio: 1.5),\
          (-o-min-device-pixel-ratio: 3/2),\
          (min-resolution: 1.5dppx)";
        if (window.matchMedia(mediaQuery).matches) {
            return 1.5;
        }
        mediaQuery = "(-webkit-min-device-pixel-ratio: 2),\
          (min--moz-device-pixel-ratio: 2),\
          (-o-min-device-pixel-ratio: 2/1),\
          (min-resolution: 2dppx)";
        if (window.matchMedia(mediaQuery).matches) {
            return 2;
        }
        mediaQuery = "(-webkit-min-device-pixel-ratio: 0.75),\
          (min--moz-device-pixel-ratio: 0.75),\
          (-o-min-device-pixel-ratio: 3/4),\
          (min-resolution: 0.75dppx)";
        if (window.matchMedia(mediaQuery).matches) {
            return 0.7;
        }
    } else {
        return 1;
    }
}

我可以使用：window.devicePixelRatio，Window.matchMedia()

有用的链接：MDN - window.devicePixelRatio，MDN - Window.matchMedia()

如何获得CSS像素/设备像素比？

4 个答案:

如何获取设备像素比