Question

window.devicePixelRatio将返回1或2，具体取决于我是否正在使用我的视网膜监视器或标准。如果我在两个监视器之间拖动窗口，则此属性将更改。有什么方法可以在发生变化时触发听众？

Answer 1

您可以使用matchMedia收听媒体查询，该查询将告诉您devicePixelRatio何时超过某个障碍（遗憾的是不会因任意比例变化而发生）。

e.g：

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

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

IE10 +和all other modern browsers支持

window.matchMedia。

参考文献：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();

window.devicePixelRatio更改侦听器

2 个答案: