function onPixelRatioChange(cb) {
let firstRun = true;
function onChange() {
if (firstRun) firstRun = false;
else cb();
matchMedia(`(resolution: ${devicePixelRatio}dppx)`).addEventListener('change', onChange, { once: true });
}
onChange();
}
// Then use it like this:
onPixelRatioChange(() => {
console.log('pixel ratio changed:', devicePixelRatio);
});
5条答案
按热度按时间4szc88ey1#
您可以使用
matchMedia
监听媒体查询,该查询将告诉您devicePixelRatio何时超过某个界限(不幸的是,不是针对任意比例变化)。例如:
当您在监视器之间拖动窗口时,以及插入或拔出外部非视网膜监视器时(如果它导致窗口从视网膜屏幕移动到非视网膜屏幕,反之亦然),将调用侦听器。
window.matchMedia
在IE10+和所有其他现代浏览器中均受支持。参考:https://code.google.com/p/chromium/issues/detail?id=123694,
min-resolution
上的MDNkxeu7u2r2#
互联网上的大多数(或全部?)答案只检测特定的变化。通常它们检测值是2还是其他什么。
问题可能出在MediaQuery中,因为它们只允许检查特定的硬编码值。
通过一些编程,可以动态地创建一个媒体查询,该查询检查当前值的变化。
3ks5zfa03#
我采用了IMO最佳答案(作者:@Neil),并使其更具可读性:
不需要固定的边界或变量。
hm2xizp94#
感谢@florian-kirmaier,这正是我所寻找的,如果你在事件侦听器中传递选项
{once: true}
,就不需要手动跟踪和删除事件侦听器。jqjz2hbq5#
我更喜欢这个,这样我就可以提供回调,并且回调最初不触发,而只在发生更改时触发: