Cet attribut est mentionné dans tous les articles sur le web mobile, mais je n'ai trouvé nulle part une explication de ce qu'il mesure exactement.
Quelqu'un peut-il préciser ce que vérifient les requêtes de ce type ?
@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
}Le ratio de pixels du dispositif est le rapport entre les pixels physiques et les pixels logiques. Par exemple, l'iPhone 4 et l'iPhone 4S présentent un ratio de pixels de 2, car la résolution linéaire physique est le double de la résolution linéaire logique.
La formule est la suivante :
Où :
est le résolution physique linéaire
et :
est la logique résolution linéaire
D'autres appareils signalent des rapports de pixels différents, y compris des rapports non entiers. Par exemple, le Nokia Lumia 1020 indique 1,6667, le Samsumg Galaxy S4 indique 3, et l'Apple iPhone 6 Plus indique 2,46. (source : dpilove ) . Mais cela ne change rien au principe, car vous ne devez jamais concevoir pour un appareil spécifique.
Le "pixel" CSS n'est même pas défini comme "un élément d'image sur un écran", mais plutôt comme un mesure angulaire non linéaire de angle de vue, qui est d'environ
d'un pouce à bout de bras. Source : Longueurs absolues des CSS
Cela a de nombreuses implications lorsqu'il s'agit de conception de sites Web, comme la préparation de ressources d'images haute définition et l'application minutieuse de différentes images à différents ratios de pixels de dispositifs. Vous ne voudriez pas obliger un appareil bas de gamme à télécharger une image à très haute résolution, pour ensuite la réduire localement. Vous ne voudriez pas non plus que les appareils haut de gamme modifient l'échelle des images à faible résolution pour offrir une expérience utilisateur floue.
Si vous êtes obligé d'utiliser des images bitmap, pour tenir compte des différents rapports de pixels des appareils, vous devriez utiliser Requêtes médias CSS ou le Élément d'image HTML pour fournir différents ensembles de ressources à différents groupes de dispositifs. Combinez cela avec des astuces comme background-size: cover ou définir explicitement l'option background-size en valeurs de pourcentage.
#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'élément px unité en CSS siempre fonctionne sur pixels logiques .
Au fur et à mesure de l'apparition de nouveaux types de périphériques, il devient plus délicat de leur fournir à tous des ressources bitmap adéquates. En CSS, les media queries sont actuellement le seul moyen, et en HTML5, la fonction élément d'image vous permet d'utiliser différentes sources pour différentes media queries, mais la prise en charge n'est pas encore totale, 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.
Merci, donc si je crée un fichier css pour l'iphone 4 et que je donne à la page des mesures CSS de 480 x 320 et width=device-width Je vais le faire étirer en plein écran ?
Exactement. Et si vous utilisez des photos haute résolution pour background-image vous pouvez le combiner avec -webkit-background-size:50% car sinon, la taille de l'image suivra l'évolution de l'image. logique nombre de pixels. w3.org/TR/2002/WD-css3-background-20020802/#background-size
Et comment faire pour que les pixels logiques et physiques soient les mêmes sur l'iphone 4 ?
Dans le monde du développement web, le ratio de pixels du périphérique (également appelé ratio de pixels CSS) détermine comment la résolution de l'écran d'un périphérique 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 suivante :
Par exemple :
Apple iPhone 6s
Lors de l'affichage d'une page web, le CSS pensera que l'appareil a une résolution de 375x667. écran et Les requêtes média seront traitées comme si l'écran était de 375x667. . Mais les éléments rendus à l'écran seront deux fois plus nets qu'un écran réel de 375x667, car il y a deux fois plus de pixels physiques dans l'écran physique.
Quelques autres exemples :
Samsung Galaxy S4
iPhone 5s
La raison pour laquelle le ratio de pixels CSS a été créé est qu'avec l'augmentation de la résolution des écrans de téléphones, si chaque appareil avait toujours un ratio de pixels CSS de 1, les pages Web seraient trop petites pour être vues.
Un écran de bureau plein écran typique est un écran d'environ 24 pouces avec une résolution de 1920x1080. Imaginez que ce moniteur soit réduit à environ 5 pouces avec la même résolution. Il serait impossible de visualiser les objets à l'écran, car ils seraient trop petits. Mais les fabricants sortent régulièrement des écrans de téléphone d'une résolution de 1920x1080.
Le rapport pixel/appareil a donc été inventé par les fabricants de téléphones pour qu'ils puissent continuer à améliorer la résolution, la netteté et la qualité des écrans de téléphone, sans que les éléments à l'écran soient trop petits pour être vus ou lus.
Voici un outil qui vous indique également la densité de pixels de votre appareil actuel :
Les images sont donc étirées pour correspondre à des pixels physiques ou à des ppp élevés. Disons que l'image est de 300px, que le px logique/css est aussi de 300 mais que le px physique est de 600, alors le réglage de la largeur de l'image signifierait que l'image est étirée. J'ai aussi entendu dire que parfois les images sont plus petites en haute résolution, pourquoi ?
@MuhammadUmer Dans votre exemple, une image de 300px avec width: 100% sera la largeur totale de l'écran. Il ne sera pas étiré. L'écran "pense" qu'il s'agit d'un affichage de 300px. Les images sont affichées en fonction de la résolution logique/css. Maintenant, dans votre exemple, vous pourriez aussi servir une image de 600px. Elle aura la largeur totale de l'affichage logique de 300 px, mais comme votre affichage est de 600 px natifs, l'image sera deux fois plus nette que votre image originale de 300 px. L'image est plus grande, mais son aspect est meilleur puisque l'écran dispose de tous ces pixels supplémentaires. C'est l'idée derrière les "écrans Retina".
L'article de Boris Smus Images à haute DPI pour des densités de pixels variables propose une définition plus précise du ratio de pixels du périphérique : le nombre de pixels du périphérique par pixel CSS est une bonne approximation, mais ne donne pas tout.
Notez que vous pouvez obtenir le DPR utilisé par un périphérique avec window.devicePixelRatio .
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Donne le nombre de pixels du dispositif par pixel CSS.
Le nombre décrit le rapport entre le nombre de pixels "réels" (pixels physiques de l'écran) utilisés pour afficher un pixel "virtuel" (taille définie dans le CSS).
Le rapport de pixels de l'appareil est en corrélation directe avec la densité de pixels de l'appareil.
La meilleure description concise que j'ai pu trouver :
L'objectif du RGPD est de maintenir une taille cohérente des pixels CSS et donc d'assurer la cohérence de l'information. des lettres, des symboles, des images et de tout ce qui se trouve à l'écran. sur l'écran, sur une variété de dispositifs avec différentes densités physiques de pixels. physiques différentes.
Source : test de résolution d'écran
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
