window.devicePixelRatio 更改侦听器

Question

window.devicePixelRatio 将 return 1 或 2，具体取决于我使用的是视网膜显示器还是标准显示器。如果我在两个显示器之间拖动 window，这个属性就会改变。有什么方法可以在更改发生时触发侦听器吗？

Answer 1

您可以使用 matchMedia 收听媒体查询，它会告诉您设备像素比率何时超过某个障碍（不幸的是，对于任意比例变化而言不是这样）。

例如：

window.matchMedia('screen and (min-resolution: 2dppx)')
    .addEventListener("change", function(e) {
      if (e.matches) {
        /* devicePixelRatio >= 2 */
      } else {
        /* devicePixelRatio < 2 */
      }
    });

当您在显示器之间拖动 window 以及插入或拔出外部非视网膜显示器时（如果它导致 window 从视网膜移动到非视网膜屏幕或反之亦然）。

IE10+支持

window.matchMedia，all other modern browsers.

参考文献：https://code.google.com/p/chromium/issues/detail?id=123694, MDN on min-resolution

Answer 2

互联网上的大多数（或全部？）答案只检测特定的变化。通常他们会检测该值是 2 还是其他值。

问题可能出在 MediaQuery 上，因为它们只允许检查特定的硬编码值。

通过一些编程，可以动态创建媒体查询，检查当前值的变化。

let remove = null;

const updatePixelRatio = () => {
  if(remove != null) {
      remove();
  }
  let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
  let media = matchMedia(mqString);
  media.addListener(updatePixelRatio);
  remove = function() {media.removeListener(updatePixelRatio)};

  console.log("devicePixelRatio: " + window.devicePixelRatio);
}
updatePixelRatio();

Answer 3

谢谢@florian-kirmaier，这正是我要找的，如果您在事件侦听器中传入选项 {once: true}，则无需手动跟踪和删除事件侦听器。

(function updatePixelRatio(){
matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
.addEventListener('change', updatePixelRatio, {once: true});
console.log("devicePixelRatio: " + window.devicePixelRatio);
})();

Answer 4

我采纳了 IMO 最佳答案（来自@Neil）并做了更多 human-readable:

function listenOnDevicePixelRatio() {
  function onChange() {
    console.log("devicePixelRatio changed: " + window.devicePixelRatio);
    listenOnDevicePixelRatio();
  }
  matchMedia(
    `(resolution: ${window.devicePixelRatio}dppx)`
  ).addEventListener("change", onChange, { once: true });
}
listenOnDevicePixelRatio();

不需要固定边界或变量。

window.devicePixelRatio 更改侦听器

window.devicePixelRatio change listener

javascript

retina