Pourquoi Google Chrome Chrome affiche-t-il l'iPhone 6 à une résolution de 375 x 667?
J'essaie d'adapter par programme les tailles d'image de mon site Web à des appareils de tailles différentes. Mais maintenant, j'ai du mal à dire de quelles tailles j'ai réellement besoin. Dans Google Chrome, je vois certaines de mes images surélevées, par exemple sur iPhone 6 de 230x230 naturel à 357x357 affiché. L'image occupe presque toute la largeur de l'écran émulé et semble juste légèrement dégradé, suggérant que la largeur de l'iPhone 6 n'est pas beaucoup plus grande que 357 pixels.
Mais Apple dit l'iPhone 6 a une résolution de 750x1334! Si c'était vrai, l'image devrait être bien pire, je pense.
J'ai également trouvé des informations contradictoires sur l'iPhone 4.
Ce site parle de l'iPhone 4 à 640x960 pixels. Chrome le montre à nouveau à la moitié de ces dimensions, 320x480.
Cette question de stackoverflow dit que "l'écran de l'iPhone est définitivement 320x480."
Qu'est-ce que j'oublie ici? Pourquoi certaines sources (y compris Apple) fournissent-elles des dimensions deux fois supérieures à ce que Chrome (et mes images) disent?
Détendez-vous, vous êtes sur le point de comprendre ce gâchis. Notez juste que 2 * 375x667 = 750x1334.
Un pixel n'est pas un pixel
L'essentiel est: un pixel de l'appareil est différent d'un Pixel CSS.
Ils sont les mêmes dans les appareils à faible densité de pixels comme votre écran d'ordinateur (96 dpi). Cependant, les périphériques à haute densité de pixels comme les smartphones et les imprimantes (jusqu'à 160 dpi) essaient d'obéir au général spécification W3C CSS comprendre qu'un pixel CSS doit toujours être proche de 1/96 de pouce (ou 0,26 mm) vu de la distance habituelle (sans lien de dépendance).
Ils n'obéissent pas à la lettre à la lettre, car cela impliquerait 1px étant exactement 1/96ème d'un réel pouce dans les paramètres DPI élevés, qui n'a jamais été implémenté dans aucun navigateur AFAIK. Cependant, ils essaient de rendre leurs pixels CSS moins minuscules malgré des densités de pixels très élevées en faisant un pixel CSS égal à deux pixels de l'appareil ou plus .
Le mode appareil Chrome fonctionne avec pixels CSS , qui est ce que vous devez utiliser pour concevoir du texte, des barres de navigation, des titres, etc., mais pas des images haute résolution. Pour ceux-ci, lisez la section suivante.
Si vous ne l'avez pas remarqué, l'image ci-dessus montre que Chrome Mode appareil vous montre l'échelle de l'appareil (combien de pixels de l'appareil équivalent à un pixel CSS).
Fixer la résolution d'image
Comme vous le savez déjà, cela affecte négativement les images, car le navigateur redimensionne également l'image. Votre image 230x230 pixels CSS devient 460x460 pixels de l'appareil , en utilisant la même qualité . Pour résoudre ce problème, tilisez l'attribut srcset pour donner au navigateur des liens vers différents fichiers de résolution de la même image.
Exemple (adapté du lien ci-dessus):
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
Un iPhone 6 va regarder ça et penser "oh, je fais semblant d'être 375px large mais je suis en fait 750px, donc je vais télécharger wolf-800.jpg. "
N'oubliez pas d'utiliser src="" pour la compatibilité. De plus, sauf si vous utilisez sizes="", le navigateur utilisera par défaut toute la largeur de l'appareil.