Étiquette : haute densité

• Retina Display Ready with Media Query

  […] there are some HD screens with 1.5 dpr. So, it is better to set the minimum threshold in Media Query for 1.5 to cover more screen resolutions.

  @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* style rules */ }

  1 2 3 4

  @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* style rules */ }

• Vous pouvez tester votre écran avec mydevice.io. Ce site analyse les caractéristiques de l’écran depuis lequel vous visionnez la page et vous donne toutes les infos sur la résolution et la définition : taille en pixels physique, taille en pixels CSS, densité de pixel, CSS ratio etc.
• Les images Retina sur le web (l’introduction explique très bien ce qu’est une image Retina et comment en produire pour vos sites): How to Make Retina-Ready Images That Don’t Slow Down WordPress.
• Guide ultime des images responsives & retina ready. En français. Va beaucoup plus loin dans les mise en oeuvre des images Retina sur votre site web (balise picture, optimisation des images, …). Version PDF.
• Retina Display Media Query sur css-tricks.com

Du bon paramétrage de la balise meta name="viewport":

Il existe à peu près 50.000 tutos sur le web qui vous apprennent comment mettre en place des images responsive et adaptatives en fonction des résolutions d’écran. Je n’en ai trouvé aucun qui évoque la NéCESSITé ABSOLUE d’avoir une balise meta name="viewport" dans les en-têtes de vos pages afin que les media queries utilisées dans l’élément source (enfant de l’élément picture) soient prises ne compte correctement!

Foutez-moi ça dans les en-têtes de vos pages!:

Afficher des images Retina ou non dans le contenu de vos pages et en fonction du support (smartphone, tablette, ordinateur)

Code testé fonctionnel! Petite archive ZIP pour tester ça de suite.