Les mobiles nous mentent !
Vous le savez sans doute : les périphériques mobiles disposent de trois types de largeurs différentes :
- screen width : largeur physique de l’écran
- device-width : largeur déclarée par le périphérique
- viewport : largeur de fenêtre du navigateur
Ces données ne concernent que la largeur mais sont transposables pour la hauteur, et sont bien-sûr susceptibles de changer selon l’orientation !
J’ai toujours cru que la valeur de device-width était fixée pour chaque périphérique, par exemple que le device-width sur iPhone 3 et 4 était tout le temps de 320 pixels. Mais ça c’était avant d’avoir fait quelques tests utilisateurs.
En bas de cet article, vous trouverez l’ensemble des données récoltées.
Ces tests n’ont rien de scientifiques ni de révolutionnaires, mais ils m’ont permis de comprendre que device-width ne dépend pas forcément que du périphérique, mais également du navigateur utilisé.
En résumé, si vous appliquez le désormais célèbre <meta name=”viewport” content=”width=device-width”>, votre base de travail sera non seulement différente selon les différents périphériques (pas de surprise jusque là), mais elle sera aussi différente sur un même périphérique selon votre navigateur !
(Et si vous n’utilisez pas la valeur “width=device-width”… c’est pire !)
Trois points me semblent essentiels :
- iPhone 3 et iPhone 4 ont le même device-width, malgré leur densité de pixels différente
- Le device-width sur Safari est identique en portrait qu’en paysage (!)
- Un device-width (en portrait) peut globalement varier de 240px à 640px selon les terminaux mobiles
De ce dernier point découle une conséquence logique : votre design, parfaitement affiché et votre navigation idéalement proportionnée pour iPhone (device-width 320px) seront comparativement deux fois plus réduits et donc potentiellement moins ergonomiques - voire inaccessibles - sur certains autres smartphones (device-width 480 à 640px).
Les données collectées
Apple iPhone 3GS
- Safari (portrait + paysage) : >180dpi / ratio >0.7 / device-width >320
Apple iPhone 4
- Safari (portrait + paysage) : >320dpi / ratio >2 / device-width >320
- Opera mini (portrait) : (NR resolution et ratio) / device-width >320
- Opera mini (paysage) : (NR resolution et ratio) / device-width >480
- iCab (portrait + paysage) : >320dpi / ratio >2 / device-width >320
- Dolphin (portrait + paysage) : >320dpi / ratio >2 / device-width >320
Apple iPad 2
- Safari (portrait + paysage) : >180dpi / device-width >640
- Dolphin (portrait + paysage) : >180dpi / device-width >640
- iCab (portrait + paysage) : >180dpi / device-width >640
HTC Sensation
- IE mobile : >220dpi / ratio >1.1 / device-width >480
HTC HD7
- IE mobile : (NR resolution et ratio) / device-width >480
HTC Incredible S
- Android : >250dpi / ratio >1.5 / device-width >640
HTC Desire HD
- Navigateur intégré (portrait + paysage) : >250dpi / ratio >1.5 / device-width >600
- Firefox (portrait) : >220dpi / ratio >1.1 / device-width >480
- Firefox (paysage) : >220dpi / ratio >1.1 / device-width >640
- Android (portrait) : >250dpi / ratio >1.5 / device-width >320
- Opera mini (portrait) : >220dpi / ratio >1.1 / device-width >380
- Opera mobile (portrait) : >220dpi / ratio >1.1 / device-width >320
- Opera mobile (paysage) >220dpi / ratio >1.1 / device-width >480
Galaxy Nexus
- Android (portrait) : >320dpi / ratio >2 / device-width >640
Galaxy Note
- Android (portrait) : >320dpi / ratio >2 / device-width >640
- Firefox (portrait) : >320dpi / ratio >2 / device-width >640
- Opera mobile (portrait) : >320dpi / ratio >2 / device-width >320
Samsung Nexus S
- Android (portrait) : >250dpi / ratio >1.5 / device-width >480
- Android (paysage) : >250dpi / ratio >1.5 / device-width >640
- Firefox (portrait) : >220dpi / ratio >1.1 / device-width >480
- Firefox (paysage) : >220dpi / ratio >1.1 / device-width >640
LG GT540
- Android (portrait) : >180dpi / ratio >0.7 / device-width >640
LG Optimus One
- Navigateur intégré (portrait) : >180dpi / ratio >0.7 / device-width >320
LG 2X
- Navigateur intégré (portrait) : >250dpi / ratio >1.5 / device-width >640
- Firefox (portrait) : >220dpi / ratio >1.1 / device-width >480
Nokia N8
- Symbian (portrait) : >220dpi / ratio >1.1
Motorola Milestone
- Android (portrait) : >250dpi / ratio >1.5 / device-width >640
Samsung Omnia 7
- IE mobile (portrait) : (NR resolution et ratio) / device-width >480
Samsung 5800 GT
- IE mobile (portrait) : >180dpi / ratio >0.7 / device-width >240
