javascript - window.devicePixelRatio 改变监听器

Question

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

Answer 1

您可以使用 matchMedia 收听媒体查询，它会在 devicePixelRatio 超过某个障碍时告诉您(不幸的是，对于任意比例变化而言不是这样)。

例如:

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

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

window.matchMedia 在 IE10+ 中受支持，all other modern browsers .

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