Les mobiles nous mentent !

On sait depuis un bon bout de temps à présent que les écrans de nos smartphones et tablettes sont des mythomanes et nous font croire tout un tas de fourberies à leur propos.

On a commencé par mettre un moment à comprendre qu’un écran mobile ne disposait non pas d’un seul type de largeur (et de hauteur), mais de trois :

  • largeur “constructeur”
  • largeur “device-width” (ou screen.width en JS)
  • largeur de fenêtre (viewport)

Mais les contrevérités ne s’arrêtent pas là, loin de là.

Voici donc la liste officielle des mensonges véhiculés par les constructeurs mobiles et qui embrouillent les esprits des développeurs web aujourd’hui encore.

Toutes les affirmations suivantes sont FAUSSES, au moins en partie :

  1. On détecte un iPhone 4 (ou 5)  en testant si sa largeur en portrait correspond bien à 640 pixels.
  2. On détecte un iPad 3 (ou plus) en testant si sa largeur en portrait correspond bien à 1536 pixels.
  3. La largeur de fenêtre (viewport) sur mobile est de 980px.
  4. La valeur de device-width correspond à la taille d’écran d’un mobile.
  5. La valeur de device-width est fixée une fois pour toute pour chaque périphérique.
  6. La valeur de device-width change selon l’orientation du mobile.
  7. Il faut utiliser une meta viewport de valeur “width=device-width”.
  8. Il faut utiliser une meta viewport.
  9. Un iPhone 4 (ou 5) est doté d’un écran “HD”.
  10. On gère les écrans HD en produisant des images de taille doublée.

EDIT : Les explications de ces affirmations se trouvent à présent détaillées dans une conférence que j’ai présentée lors de Web-5 à Béziers en juin 2013 : ** »10 Révélations sur le Web mobile »**.

Je vous invite à consulter les slides de cette conférence librement disponibles sur Slideshare à l’adresse [www.kiwi.gg/web5](http://www.kiwi.gg/web5)

Quelques ressources très intéressantes pour étayer le sujet, à lire très consciencieusement :