window.devicePixelRatio更改侦听器

Question

window.devicePixelRatio将返回1或2,具体取决于我是否正在使用我的视网膜监视器或标准.如果我在两个监视器之间拖动窗口,则此属性将更改.有没有办法在变化发生时让听众开火？

Answer 1

你可以听一下媒体查询matchMedia,告诉你devicePixelRatio何时超过某个障碍(遗憾的是不是因为任意比例变化).

例如:

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

在监视器之间拖动窗口时,以及插入或拔出外部非视网膜监视器时(如果它导致窗口从视网膜移动到非视网膜屏幕,反之亦然),将调用监听器.

window.matchMediaIE10 +和所有其他现代浏览器都支持.

参考文献:https://code.google.com/p/chromium/issues/detail？id = 123694,MDN onmin-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

我采用了 IMO 的最佳答案（@Neil）并使其更易于阅读：

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

不需要固定的边界或变量。

Answer 4

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

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