jQuery 检测 DPI 变化

Question

我现在尝试半天来检测 jQuery 的 DPI 变化。

场景如下：
我有一台 MacBook Pro (Retina) 和一个连接到它的普通屏幕。当我将浏览器 window 从普通浏览器移至 MacBook 时，我想检测 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
  }
}

不要为此工作，因为分辨率只是发生了物理变化。

有什么办法可以实现吗？

Answer 1

如何使用转换事件和媒体查询

CSS:

body {
  transition:font-size 1ms;
  font-size:1em;
}
@media  only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi) {
      body {
        font-size:1.1em
      }
}

JS:

$("body").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
  $(document).trigger('dpiChange', {pixelRatio: window.devicePixelRatio})
});

$(document).on('dpiChange', function (e, data) {
  if (data.pixelRatio >= 1.3) {
    // do retina
    console.log('retina')
  } else {
    // do standard
    console.log('standard')
  }
})

JSBIN:
http://jsbin.com/siramo/1/edit?html,css,js,console

伟大的 Retina 特定媒体查询教程：
https://css-tricks.com/snippets/css/retina-display-media-query/

Answer 2

我刚试过我的第二台显示器有不同的分辨率。

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

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>

jQuery 检测 DPI 变化

jQuery detect DPI change

javascript

jquery

highdpi

retina