javascript - jQuery检测DPI更改

我现在尝试半天，以检测jQuery的DPI更改。

该方案如下：
我有一个MacBook Pro（视网膜）和连接到它的常规屏幕。当我将浏览器窗口从常规窗口移动到MacBooks时，我想检测DPI更改。

显然，像

$(window).resize(function() {
  if (window.devicePixelRatio && window.devicePixelRatio >= 1.3) {
    // do retina
  } else {
    // do standard
  }
}

和

$(document).resize(function() {
  if (window.devicePixelRatio && window.devicePixelRatio >= 1.3) {
    // do retina
  } else {
    // do standard
  }
}

对此不起作用，因为分辨率实际上发生了变化。

有什么办法可以实现这一目标？

最佳答案

我刚刚尝试了第二台显示器使用不同的分辨率。

当我将浏览器从第一屏幕移到第二屏幕时，我必须调整浏览器的大小，以便您的方法正确：

var width = screen.width;
var height = screen.height;

$(window).on('resize', function(e) {
  if (screen.width !== width || screen.height !== height) {
    width = screen.width;
    height = screen.height;

    console.log('resolution changed!');
  }
});

但是，如果您不想调整浏览器的高度或宽度，则永远不会触发此事件。在这种情况下，可以使用另一种方法作为工作方法：
两个功能是为了：


及时根据旧版本测试当前的浏览器分辨率
停止计时器
使用事件

(function ($) {

  var width = screen.width;
  var height = screen.height;
  var idTimer = null;

  $.fn.startCheckResolution = function (interval) {
    interval = interval || 50;
    idTimer = setInterval(function () {
      if (screen.width !== width || screen.height !== height) {
        width = screen.width;
        height = screen.height;
        $(this).trigger('resolutionChanged');
      }
    }.bind(this), interval);
    return this;
  };

  $.fn.stopCheckResolution = function () {
    if (idTimer != null) {
      clearInterval(idTimer);
      idTimer = null;
    }
  };

}(jQuery));

$(window).startCheckResolution(1000).on('resolutionChanged', function(e) {
  console.log('Resolution changed!');
  // $(window).stopCheckResolution();
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

关于javascript - jQuery检测DPI更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39106399/