web-dev-qa-db-fra.com

Quel est le meilleur moyen de détecter la prise en charge de la rétine sur un appareil utilisant JavaScript?

En ce moment, j'utilise ceci:

function is_retina_device() {
    return window.devicePixelRatio > 1;
}

Mais sa simplicité me fait peur. Y a-t-il une vérification plus approfondie?

javascriptjqueryretina-display
42
TK123

D'après tout ce que j'ai lu récemment, les navigateurs semblent évoluer vers l'expression de requête multimédia resolution. C'est à la place de device-pixel-ratio qui est utilisé dans la réponse actuellement acceptée. La raison pour laquelle device-pixel-ratio ne devrait être utilisé que comme solution de secours est qu'il ne s'agit pas d'une requête de support standard.

Selon w3.org:

Il était une fois Webkit qui avait décidé qu'une requête de support concernant la résolution de l'écran était nécessaire. Mais plutôt que d'utiliser la requête multimédia de résolution déjà standardisée, ils ont inventé -webkit-device-pixel-ratio. 

Voir l'article complet

Documentation sur Media Query

Puisque resolution est normalisé et donc futur, utilisons-le en premier dans la détection pour la vérification future. De plus, comme je ne sais pas si vous souhaitez détecter uniquement les périphériques dppx élevés ou uniquement _ ​​rétine (Apple uniquement), j'ai ajouté un de chaque. Enfin, la détection d’Apple est simplement une détection d’agent d’utilisateur, elle ne peut donc pas être dépendante. Remarque: pour la fonction isRetina, j'utilise un dppx de 2 au lieu de 1,3 car tous les appareils Apple rétiniens ont un 2dppx.

Remarque, il apparaît que MS Edge a quelques problèmes avec les valeurs non entières

function isHighDensity(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}


function isRetina(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}
39
Adam Merrifield

Si vous le souhaitez pour les images, vous pouvez utiliser retinajs ou ce code est une réponse courante pour le détecter:

function isRetinaDisplay() {
        if (window.matchMedia) {
            var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
            return (mq && mq.matches || (window.devicePixelRatio > 1)); 
        }
    }
31
Juan Castillo

En fait, le code que vous utilisez dans votre question est tout à fait correct si vous vous souciez uniquement des navigateurs modernes. (Voir: http://caniuse.com/#feat=devicepixelratio ) 

Tous les navigateurs modernes l'ont mis en œuvre, et les anciens navigateurs seraient simplement desservis par vos images de résolution inférieure. Je ne m'attends pas à ce que IE10 apparaisse sur un appareil à rétine/haute résolution. En outre, l'utilisation de vérifications CSS dans JavaScript n'est-elle pas plus étrange que d'utiliser une propriété de fenêtre native?

Heck, le support du navigateur devicePixelRatio est encore meilleur que la résolution spécifiée. (Voir: http://caniuse.com/#feat=css-media-resolution )

Je dirais que son utilisation est très sûre, nous l'utilisons dans les sites de production avec plus de 10 millions de visiteurs par mois. Fonctionne comme prévu.

La seule chose que je changerais est le nom de la fonction, car la nécessité de charger des images haute résolution ne signifie pas techniquement que l'écran est une rétine. En fait, vous n’avez même pas besoin d’une vérification numérique, car undefined > 1 donne false. 

function is_high_resolution_screen() {
  return window.devicePixelRatio > 1;
}
10
Guido Bouman

devicePixelRatio n'est pas fiable du tout. Lorsque vous effectuez un zoom avant à 200%, le paramètre window.devicePixelRatio vous renverra 2, mais vous n'êtes pas sur un écran Retina. 

0
Lee Le