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

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

编辑：我应该意识到这只是缩放级别。我已经提到了缩放级别的规范参考

CSS像素是我们几乎所有东西使用的单位——它是element.style.width、element.clientWidth、element.offsetWidth等的意思。设备像素是浏览器实际绘制到的像素。一些属性是以设备像素为单位测量的，例如window.screen.width，它是用户放大时不变的屏幕大小（例如1024）

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

我读过和，但他们都没有说如何得到这个比率。到目前为止，我唯一的想法是收集鼠标移动并测量event.clientX中的变化除以event.screenX中的变化，或者使用

moz--min设备像素比

编程创建媒体查询，使用

getComputedStyle（）

测试规则是否匹配，并通过二进制搜索缩小范围。我希望有一种更容易/更可靠的方法

---

编辑：我尝试使用

@媒体（-webkit最小设备像素比率：1）

查询Chrome、Safari和Firefox 4，显然webkit将该属性视为一个恒定的设备像素与屏幕像素比率（不随缩放而改变），而Firefox4则将其视为设备像素对CSS像素的比率（放大时会增加）。因此，在Firefox4中，我可以使用二进制搜索发现CSS像素/设备像素比率，但不能使用Webkit。

您可以在基于Webkit的浏览器中使用

window.devicePixelRatio

直接在JavaScript中获取设备像素比率。我已经在谷歌浏览器、安卓浏览器（2.2+）和移动Safari上使用过。但是我不知道其他浏览器。

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

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;
};

---

有一个更好的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;
}

如何获得设备像素比

---

本例使用

window.devicePixelRatio

作为起点，

window.matchMedia（）

Web API作为回退计算

浏览器对这两个特性的支持都非常好，所以这对于大多数用例来说都非常有效

下面是一个检索此信息的函数：

CanIUse：

---

有用的链接：，

虽然依赖于flash，但您可能会发现这是一个有用的问题：这是一个很好的问题，但已经有好几年了。其中一个答案提到FF29，我们现在是53岁。如果时间允许，您能选择最佳答案并提供有关此信息状态的更新吗？：-）

window.devicePixelRatio

在Opera（Presto 2.8+）窗口中工作。devicePixelRatio===1在Kindle Fire HD 7中，即使它的像素密度为150%…Firefox（从v.29开始）仍然错误地计算

window.devicePixelRatio

如果用户缩放了他们的窗口。Firefox以设备的像素比率呈现页面（例如：2.0表示“视网膜”类型显示），但随后返回实际计算的像素比率（例如：在3倍窗口缩放时，devicePixelRatio将返回2.0*3=6.0）。这会对

canvas

元素造成混乱。从Firefox 18开始，当浏览器缩放时，Mozilla会更改devicePixelRatio值，因此“device..”具有欺骗性。这是一个很好的技巧。应该注意，它在document.ready（）之前（似乎）不起作用。太好了，可以在FF、Chrome、IE、Edge上使用，甚至可以使用缩放因子！也可以在iOS 10上进行测试。将来，当您修改来自其他源的代码或内容时，请确保正确使用。您在此处有链接，但您将其隐藏在“源”标题下的底部“，而不是直接将其包含在复制的代码中。此外，您需要包含原始作者的姓名。我已在此处为您进行了更改；请记住这一点。谢谢！

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;
    }
}