La tête dans le Flux !

La détection de l’orientation du périphérique se fait de manière native par le navigateur mobile.

Mais savez-vous qu’en fixant une surface de viewport à width="device-width" (pratique habituelle), vous allez certainement conserver cette valeur lors du passage en orientation paysage, alors que la valeur souhaitée serait plutôt device-height dans ce sens ?

J’ai voulu tester cette affirmation pour répondre à une question essentielle : la valeur de device-width doit-elle demeurer constante quelle que soit l’orientation du terminal mobile ?

Selon moi, il serait logique que oui. Mais en fait, ça dépend…

J’ai créé une page de test pour vérifier si le device-width change avec l’orientation : http://mobitest.me/

Les infos de la balise <meta> viewport sont celles-ci :

<meta name="viewport" content="width=device-width">

Résultats Smartphones

• iPhone 3, iPhone 4, iPhone 5 (iOS5 / iOS6) :
  Safari mobile : 320px (portrait) → 320px (paysage)
  Chrome mobile : 320px (portrait) → 320px (paysage)
  Dolphin : 320px (portrait) → 320px (paysage)
  OneBrowser :  320px (portrait) → 320px (paysage)
  UC browser : 320px (portrait) → 320px (paysage)
  Opera Mini : 320px (portrait) → 480px (paysage, après refresh)
• Samsung Galaxy Nexus (Android 4.2) :
  Navigateur natif : 320px (portrait) → 540px (paysage)
  Chrome mobile : 320px (portrait) → 540px (paysage)
  Firefox mobile : 320px (portrait) → 540px (paysage)
  Opera Mobile : 320px (portrait) → 540px (paysage)
• LG Optimus 2X (Android 2.3) :
  Navigateur natif : 320px (portrait) → 480px (paysage)
  Chrome mobile : 320px (portrait) → 480px (paysage)
  UC browser : 320px (portrait) → 480px (paysage)
  Firefox mobile : 320px (portrait) → 480px (paysage)
  Opera Mobile : 320px (portrait) → 480px (paysage)
• Samsung Wave (Bada 1.1) :
  Dolphin : 240px (portrait) → 320px (paysage)
• Samsung Wave gt 8500 (Bada 2) :
  Dolphin : 320px (portrait) → 480px (paysage)
• Nokia N8 (Symbian) :
  Opera Mobile : 240px (portrait) → 427px (paysage, après refresh)
  Opera Mini : 360px (portrait) → 640px (paysage, après refresh)

Résultats Tablettes

• iPad 1, 2, 3 :
  Safari mobile : 768px (portrait) → 768px (paysage)
  Opera Mini : 768px (portrait) → 1024px (paysage, après refresh)
• Samsung Galaxy Tab 8.9 (Android 3) :
  Browser natif : 800px (portrait) → 1280px (paysage)
  Chrome mobile : 800px (portrait) → 1280px (paysage)
  Dolphin : 800px (portrait) → 1280px (paysage)
  Opera Mobile : 800px (portrait) → 1280px (paysage)

Mais ça veut dire quoi tout ça ?!

La règle semble être la suivante:

• De manière générale, sur la plupart des terminaux testés, la valeur de device-width change et s’adapte à l’orientation.
• Apple fait une exception à la règle : la valeur de device-width demeure constante en portrait et en paysage sur tous ses navigateurs (sauf sur Opera mini).

Ce comportement a une incidence sur l’affichage des pages : en mode paysage sur les produits Apple (uniquement ?), la largeur de fenêtre reste constante tandis que la résolution physique change. Conséquence : la taille globale augmente d’environ 1/3.

<meta name="viewport" content="initial-scale=1.0">

Euh, je ne suis pas sûr d’avoir vraiment compris :/

Voyons cela en images…

Prenons un navigateur au hasard sur iPhone ou iPad (ici Chrome, mais cela aurait pu être n’importe lequel sauf Opera) avec un meta viewport en “width=device-width”.
La valeur de device-width en paysage est figée, elle est donc de 320px comme en portrait. La page est donc légèrement zoomée :

Petite variante : même navigateur, même envionnement mais un meta viewport en “initial-scale=1.0”.
Cette fois, la valeur de device-width, n’étant pas figée par la balise meta, s’adapte correctement et la page n’est pas zoomée. C’est le comportement souhaité :

Alors, que faire pour être sûr ?

• préférer une meta viewport avec initial-scale=1.0 plutôt que width=device-width
• tester préférentiellement “width” et non “device-width” avec vos CSS Media Queries
• se souvenir que les mobiles nous mentent sur leurs valeurs de device-width

N’hésitez pas à me signaler si vos propres tests confirment ou contredisent les miens ;)