La tête dans le Flux !

Alors, on le détecte comment ce nouvel iPad3 ?

À peine une petite semaine de vacances méritées et voilà-t-y pas qu’un nouvel iPad vient de sortir. Troisième de sa lignée mais qui ne s’appellerait même pas iPad3.

Bref, encore une révolution à intégrer pour nous, pauvres webdesigners !

D’autant plus qu’une nouvelle donnée risque d’être difficile à digérer : sa définition ultra-fine de 2048×1536 pixels et sa resolution de 264 DPI (points par pouce) (voir spécifications complètes).

En résumé, il va nous falloir adapter nos sites web sur une surface réduite de tablette, mais avec des caractéristiques d’un bel écran de bureau… sans se mélanger les pinceaux.

Depuis quelques jours déjà, émerge une partie de la solution qui est de cibler, via Media Queries, la résolution en DPI, ou en ratio de pixels à l’aide de la propriété pixel-ratio : si ce ration est au minimum de 2, alors le périphérique est forcément un mobile ou une tablette de haute densité, et non un écran de bureau.

Dans la pratique, avec le préfixe actuellement indispensable, cela donne la syntaxe (-webkit-min-device-pixel-ratio: 2).

Il ne reste plus qu’à ajouter les critères de dimensions (largeur ou hauteur).

Et en ce moment, la réponse la plus souvent trouvée sur les forums et sites anglophones est celle-ci :

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)

Selon moi, cette réponse est erronée, car je suis persuadé que l’iPad3 suivra le même raisonnement que l’iPhone4 par rapport à son prédécesseur : la largeur physique (width) et la largeur déclarée (device-width) seront différentes.

En clair, si les dimensions seront de 2048×1536 pixels, je suis prêt à parier que les valeurs de device-width seront identiques à l’iPad1 et l’iPad2, à savoir 1024×768 pixels. Seule la densité de pixels (retina) changera.

Pour détecter l’iPad3 via Media Queries, je présume que la meilleure façon de procéder sera celle-ci :

@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)

Si quelqu’un a des informations précises et officielles concernant les valeurs de device-width et de viewport (que je suppose à 980px), je suis très preneur.

EDIT : le préfixe -webkit- s’applique uniquement aux navigateurs sous moteur Webkit, vous l’aurez compris. Il est donc reconnu par Safari, Chrome et autres Androideries, mais pas Opera mini ou les quelques rares autres navigateurs non Webkit installables sur iPad et plus difficilement détectables.

Détecter le device-width en JavaScript, mission impossible ?

Suite à un billet récent constatant que le device-width (largeur d’écran d’un périphérique) diffère selon les navigateurs, j’ai souhaité pouvoir proposer un chargement conditionnel de mes feuilles de styles mobile voire de modifier la valeur de mon meta viewport.

Le principe est de détecter en JavaScript la valeur de device-width et de charger une feuille de style adaptée (par exemple : styles320.css, styles640.css, styles800.css, styles1024.css). Attention, je ne dis pas qu’il s’agit d’une bonne pratique, je souhaitais simplement tester cette possibilité d’adaptation.

Et là c’est le drame…

Car au final ni screen.width ni windows.innerWidth de JavaScript ne correspondent à device-width, c’est à dire la valeur indispensable pour s’adapter aux terminaux mobiles.

Pour parvenir à mes fins, j’ai rapidement créé une page HTML de test à laquelle il est possible d’accéder ici : http://bit.ly/device-width

Voici le contexte :

1. application d’une meta viewport de valeur “width=device-width”
2. détection du device-width à l’aide de CSS mediaqueries (@media (device-width) {})
3. détection de screen.width ou windows.innerWidth via JavaScript et chargement d’une feuille de style correspondante (styles320.css, styles640.css, styles800.css ou styles1024.css)

J’ai pu constater que selon les terminaux, leur orientation et le navigateur employé, les deux valeurs ne coïncident pas ! Testez chez vous et n’hésitez pas à me faire vos retours.

Et si vous avez une solution magique, je suis preneur !

EDIT : Un nouveau challenger : window.matchMedia

Suite à la proposition d’Anthony, j’ai rajouté un troisième test dans la page : celui de window.matchMedia qui paraît prometteur puisqu’il correspond exactement à la valeur recherchée.

Le test en résumé ressemble à ça :

if (window.matchMedia("(min-width: 640px)").matches) {
document.write("device-width > 640px (window.matchMedia OK)");
} 

Aux dernières nouvelles, les navigateurs mobiles Safari, Firefox et Android 3+ semblent supporter window.matchMedia, ce qui n’est pas le cas d’Opera (ni mobile ni mini). Pour IE mobile, je n’ai pas encore de retours.

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