jQuery обнаруживает изменение DPI

Question

Я пытаюсь в течение полудня проверять изменение DPI с помощью jQuery.

Сценарий выглядит следующим образом:
У меня есть MacBook Pro (Retina) и обычный экран, подключенный к нему. Когда я перемещаю свое окно браузера с обычного на 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

Я только что попробовал с моим вторым монитором, имеющим другое разрешение.

Когда я двигаю браузер от первого ко второму экрану и обратно я должен изменить размер браузера, чтобы ваш подход является правильным:

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!'); 
 
    } 
 
});

Но, если вы не хотите для настройки высоты или ширины браузера это событие никогда не будет срабатывать. В этом случае другой подход может быть использован в качестве workaraound: две функции для того, чтобы:

• на постоянной основе теста текущее разрешение браузера против старого один
• остановка этого таймера
• использовать событие

(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>

Answer 2

Как об использовании переходных событий и медиа-запрос

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 Specific Media Query Учебник :
https://css-tricks.com/snippets/css/retina-display-media-query/