La tête dans le Flux !

“Retina”, “HDPI”, XHDPI”, et autres jolis sigles sont aujourd’hui intimement associés à des techniques les plus folles d’adaptations d’images pour s’afficher le plus nettement possible.

Et pourtant… le “problème du retina” n’a rien à voir avec la résolution.

C’est purement et simplement une histoire de pixel-ratio.

Prenons un exemple concret : l’iPhone 4 d’Apple (retina) a les caractéristiques suivantes:

• une “haute résolution” de 320dpi
• une largeur en pixel de 640px
• une largeur déclarée (device-width) de 320px
• un pixel-ratio de 2 (640/320)

Si les images sont “floues”, c’est simplement parce que l’iPhone 4 croit disposer de 320px alors qu’il en a 640 à disposition.  Du coup, avec un meta viewport adapté, une image de 320px occupe toute la largeur de l’écran… mais 1 pixel réel sur 2 doit être extrapolé pour occuper les 640 “vrais” pixels. D’où le flou.

Mais cela n’a strictement rien à voir avec la résolution, la haute définition ou le mot-valise “retina”.

C’est simplement parce qu’il y a inadéquation entre la largeur réelle (640px) et celle déclarée (320px) et dont le rapport détermine un pixel-ratio d’une valeur de 2.

Un pixel-ratio de 2 signifie qu’1 pixel sur 2 sera indéterminé et qu’il sera nécessaire d’afficher des images d’une taille doublée pour être nettes.

Pixel-ratio est un choix

Le navigateur choisit quelle est sa valeur de “device independant pixels” (dips) et décide donc de la valeur du pixel-ratio.

Cela engendre une certaine “inconsistance” entre les navigateurs :

• Sur un même terminal, la valeur de pixel-ratio peut varier d’un navigateur à un autre. 
• Certains navigateurs (sur retina MacBook par ex.) changent leur valeur de pixel-ratio si on modifie la résolution d’écran
• Modifier la valeur de la meta viewport peut modifier le pixel-ratio sur certains navigateurs (Opera par ex)
• etc.

Si l’iPhone 4, quelle que fût sa définition, avait eu un pixel-ratio de 1, il n’y aurait strictement aucun problème de “retina”.

En clair, tous nos problèmes d’images “retina” n’ont rien à voir du tout avec “retina”.

Bref, pensez d’abord à vérifier le valeurs de pixel-ratio de vos mobiles avant de vous intéresser à leur nombre de pixels.

Concrètement…

Concrètement, ce code que l’on commence à trouver dans plein de tutoriels ne sert à rien pour corriger les “problèmes de retina” :

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Il est préférable de cibler le pixel-ratio pour tous les navigateurs :

@media
(-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-device-pixel-ratio: 2/1) { 
  /* Retina-specific stuff here */
}

Ou encore mieux pour l’avenir :

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx)              /* The Future */
...
}

Dans ce dernier exemple, l’unité “dppx” correspond à “dots per pixel”, soit “points par pixel” (eh oui, le pixel n’est plus la plus petite unité d’un écran). En gros, cela revient exactement au même que le pixel-ratio.

source W3C

Pour rappel, deux outils en ligne pour vérifier toutes les informations de tailles (et de pixel-ratio) de votre périphérique : 

http://mobitest.me/ 

http://mqtest.io/

Et voici une page récapitulative des pixel-ratios de périphériques courants :  http://bjango.com/articles/min-device-pixel-ratio/