cela est mentionné dans chaque article sur le Web mobile, mais je ne trouve nulle part d'explication sur ce que cet attribut mesure exactement.
Quelqu'un peut-il s'il vous plaît expliquer ce que les requêtes comme cette vérification?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Réponse courte

Le rapport de pixels du périphérique est le rapport entre les pixels physiques et les pixels logiques. Par exemple, l'iPhone 4 et l'iPhone 4S rapportent un rapport de pixels de l'appareil de 2, car la résolution linéaire physique est le double de la résolution linéaire logique.

• Résolution physique: 960 x 640
• Résolution logique: 480 x 320

La formule est:

Où:

est la résolution physique linéaire

et:

est la résolution linéaire logique

D'autres appareils signalent des ratios de pixels différents, y compris des non entiers. Par exemple, le Nokia Lumia 1020 rapporte 1.6667, le Samsumg Galaxy S4 rapporte 3 et l'Apple iPhone 6 Plus rapporte 2.46 (source: dpilove ) . Mais cela ne change rien en principe, car vous ne devriez jamais concevoir pour un appareil spécifique.

Discussion

Le "pixel" CSS n'est même pas défini comme "un élément d'image sur un écran", mais plutôt comme une mesure angulaire non linéaire de l'angle de vision, qui est d'environ un pouce à bout de bras. Source: longueurs absolues CSS

Cela a de nombreuses implications en matière de conception Web, telles que la préparation de ressources d'image haute définition et l'application minutieuse de différentes images à différents ratios de pixels de l'appareil. Vous ne voudriez pas forcer un appareil bas de gamme à télécharger une image à très haute résolution, uniquement pour la réduire localement. Vous ne voulez pas non plus que les appareils haut de gamme mettent à l'échelle les images basse résolution pour une expérience utilisateur floue.

Si vous êtes coincé avec des images bitmap, pour prendre en charge de nombreux ratios de pixels de périphériques différents, vous devez utiliser CSS Media Queries pour fournir différents ensembles de ressources pour différents groupes de périphériques. Combinez cela avec de belles astuces comme background-size: coverou définissez explicitement les background-sizevaleurs de pourcentage.

Exemple

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

De cette façon, chaque type de périphérique ne charge que la ressource image correcte. Gardez également à l'esprit que l' pxunité en CSS fonctionne toujours sur des pixels logiques .

Un cas pour les graphiques vectoriels

Au fur et à mesure que de plus en plus de types de périphériques apparaissent, il devient de plus en plus difficile de leur fournir à tous des ressources bitmap adéquates. En CSS, les requêtes multimédias sont actuellement le seul moyen, et en HTML5, l' élément image vous permet d'utiliser différentes sources pour différentes requêtes multimédias, mais le support n'est toujours pas à 100% car la plupart des développeurs Web doivent encore prendre en charge IE11 pendant un certain temps ( source: caniuse ) .

Si vous avez besoin d'images nettes pour des icônes, des dessins au trait, des éléments de conception qui ne sont pas des photos , vous devez commencer à penser au SVG, qui s'adapte parfaitement à toutes les résolutions.

Ratio de pixels de l'appareil == Ratio de pixels CSS

Dans le monde du développement Web, le ratio de pixels de l'appareil (également appelé Ratio de pixels CSS) est ce qui détermine la façon dont la résolution d'écran d'un appareil est interprétée par le CSS.

Le CSS d'un navigateur calcule la résolution logique (ou interprétée) d'un appareil par la formule:

Par exemple:

Apple iPhone 6s

• Résolution réelle: 750 x 1334
• Ratio de pixels CSS: 2
• Résolution logique:

Lors de la visualisation d'une page Web, le CSS pensera que l'appareil a un écran de résolution 375x667 et Media Queries répondra comme si l'écran était 375x667 . Mais les éléments rendus sur l'écran seront deux fois plus nets qu'un véritable écran 375x667 car il y a deux fois plus de pixels physiques dans l'écran physique.

Quelques autres exemples:

Samsung Galaxy S4

• Résolution réelle: 1080 x 1920
• Ratio de pixels CSS: 3
• Résolution logique:

iphone 5s

• Résolution réelle: 640 x 1136
• Ratio de pixels CSS: 2
• Résolution logique:

Pourquoi le rapport de pixels de l'appareil existe-t-il?

La raison pour laquelle le rapport de pixels CSS a été créé est que, à mesure que les écrans des téléphones obtiennent des résolutions plus élevées, si chaque appareil avait toujours un rapport de pixels CSS de 1, les pages Web seraient rendues trop petites pour être vues.

Un moniteur de bureau plein écran typique a une résolution d'environ 24 "à 1 920 x 1 080. Imaginez si ce moniteur était réduit à environ 5" mais avait la même résolution. Voir des choses à l'écran serait impossible car elles seraient si petites. Mais les fabricants proposent régulièrement des écrans de téléphone de résolution 1920 x 1080.

Ainsi, le rapport de pixels de l'appareil a été inventé par les fabricants de téléphones afin qu'ils puissent continuer à pousser la résolution, la netteté et la qualité des écrans de téléphone, sans rendre les éléments de l'écran trop petits pour être vus ou lus.

Voici un outil qui vous indique également la densité de pixels de votre appareil actuel:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Donne le nombre de pixels de périphérique par pixel CSS.

c'est presque auto-explicatif. le nombre décrit le rapport de la quantité de pixels "réels" (pixels physiques de l'écran) utilisés pour afficher un pixel "virtuel" (taille définie en CSS).

L'article de Boris Smus High DPI Images for Variable Pixel Densities a une définition plus précise du ratio de pixels de l'appareil: le nombre de pixels de l'appareil par pixel CSS est une bonne approximation, mais pas toute l'histoire.

Notez que vous pouvez obtenir le DPR utilisé par un appareil avec window.devicePixelRatio.