réponse Courte

le rapport des pixels de l'appareil est le rapport entre les pixels physiques et les pixels logiques. Par exemple, l'iPhone 4 et l'iPhone 4S rapportent un rapport de pixel d'appareil de 2, parce que 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 le résolution linéaire physique

et:

est la logique résolution linéaire

les autres appareils signalent des rapports de pixels différents, y compris les pixels non entiers. Par exemple, le rapport Nokia Lumia 1020 1.6667, le Samsumg Galaxy S4 reports 3, et L'Apple iPhone 6 Plus reports 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 quelconque", mais plutôt comme une mesure angulaire non linéaire de angle d'observation, qui est d'environ d'un pouce à bout de bras. Source: Absolu CSS Longueurs

cela a beaucoup d'implications quand il s'agit de la conception web, comme la préparation de ressources d'image haute définition et l'application soigneuse de différentes images à différents rapports de pixels d'appareil. Vous ne voudriez pas forcer un appareil bas de gamme à télécharger une image de très haute résolution, seulement pour réduisez-le localement. Vous ne voulez pas non plus d'appareils haut de gamme pour haut de gamme des images de faible résolution pour une expérience utilisateur floue.

si vous êtes bloqué avec des images bitmap, pour accommoder pour beaucoup de rapports de pixel de dispositif différents, vous devez utiliser css Media Queries pour fournir des ensembles différents de ressources pour différents groupes de dispositifs. Combinez cela avec de belles astuces comme background-size: cover ou définir explicitement le background-size aux valeurs en 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'unité px dans CSS toujours fonctionne sur pixels logiques .

Un cas pour les graphiques vectoriels

comme de plus en plus de types de dispositifs apparaissent, il obtient plus difficile de fournir à tous des ressources bitmap adéquates. Dans CSS, les requêtes médias est actuellement le seul moyen, et dans HTML5, le élément d'image vous permet d'utiliser différentes sources pour les différentes requêtes médias, mais le soutien n'est toujours pas 100% puisque la plupart des développeurs web ont encore à soutenir IE11 pendant un certain temps plus (source: caniuse ) .

si vous avez besoin d'images nettes pour icônes, line-art, design éléments que ne sont pas des photos , vous devez commencer à penser à SVG, qui se balance magnifiquement à toutes les résolutions.