Simuler le rendu d'un écran retina dans votre navigateur

J'ai découvert un peu par hasard que Firefox simule le rendu d'un écran à haute densité de pixels — ou retina — lorsqu'un certain niveau de zoom est atteint (apparemment, c'est 150%. Soit 4x le zoom normal.)

Cela va donc reproduire le rendu flou des images (sauf si vous utilisez du SVG ou une icon-font), mais cela peut aussi déclencher les media queries correspondantes.

Par exemple, la media query suivante se déclenche en zoomant sur Firefox :

@media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 144dpi),
    (min-resolution: 1.5dppx) {
            // Vos styles retina
}

Voir la démo (ctrl++ pour déclencher le zoom)

Cela peut s'avérer pratique si vous devez tester rapidement le bon fonctionnement d'un fix pour écran retina sans avoir l'appareil adéquat sous la main.

Au niveau compatibilité, j'ai noté que cette fonctionnalité était aussi présente sur Chrome (attention, il faut rafraichir la page pour déclencher la media query) et Internet Explorer.