window.devicePixelRatio更改侦听器 [英] window.devicePixelRatio change listener

问题描述

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

解决方案

您可以使用matchMedia收听媒体查询，该查询将告诉您devicePixelRatio何时超过某个障碍(不幸的是，不是任意缩放比例)./p>

例如:

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

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

IE10 +和所有其他现代浏览器均支持

window.matchMedia.

参考文献: https://code.google.com/p/chromium/issues/detail ?id = 123694 ， min-resolution上的MDN

window.devicePixelRatio will return 1 or 2 depending on if I'm using my retina monitor or standard. If I drag the window between the two monitors, this property will change. Is there a way I can have a listener fire when the change occurs?

解决方案

You can listen to a media query with matchMedia that will tell you when the devicePixelRatio goes past a certain barrier (unfortunately not for arbitrary scale changes).

e.g:

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

The listener will be called when you drag a window between monitors, and when plugging in or unplugging an external non-retina monitor (if it causes the window to move from a retina to non-retina screen or vice-versa).

window.matchMedia is supported in IE10+, and all other modern browsers.

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

这篇关于window.devicePixelRatio更改侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！