jQuery détecter PPP changement

Question

J'essaye maintenant pendant une demi-journée pour détecter un changement DPI avec jQuery. Le scénario est le suivant:
J'ai un MacBook Pro (Retina) et un écran standard connecté à celui-ci. Quand je déplace la fenêtre de mon navigateur vers les MacBook, je veux détecter le changement de DPI.

Il est évident que des événements comme

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

et

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

ne fonctionnent pas pour cela, puisque la résolution a juste changé physiquement.

Y at-il un moyen de réaliser cela?

Answer 1

Je viens d'essayer avec mon deuxième moniteur ayant une résolution différente.

Lorsque je déplace le navigateur de la première à la deuxième écran et à l'arrière je dois redimensionner le navigateur afin que votre approche est correcte:

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

Mais, si vous ne voulez pas pour ajuster la hauteur ou la largeur du navigateur, cet événement ne sera jamais déclenché. Dans ce cas, une autre approche peut être utilisée comme workaraound: deux fonctions afin de:

• sur le test de base fois la résolution du navigateur contre l'ancien
• arrêt cette minuterie
• utiliser l'événement

(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

Comment l'utilisation des événements de transition et une requête média

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

Grand Retina Specific Media Query Tutorial :
https://css-tricks.com/snippets/css/retina-display-media-query/