La tête dans le Flux !

Apple avait annoncé que le fâcheux bug d’orientation de l’iPhone allait être corrigé avec l’iOS6.

Ce bug était causé par la présence de “initial-scale= 1.0” (pourtant pratique) dans la meta Viewport HTML.

Et voilà que l’iOS6 est sorti, et que la correction proposée est pour le moins… surprenante.

Voici quelques tests en images à partir d’un document simple :

• une page fluide (body sans largeur définie)
• une police fluide (taille de police navigateur, sauf pour le titre h1)
• du contenu réparti entre un div de largeur fixe (300px), un div de largeur auto et un paragraphe de largeur auto
• du contenu généré en CSS (avec :before et :after)

Note : je suis sur iPhone 4 / iOS6

1- page de test initiale (portrait)

Page visible à cette adresse : https://bit.ly/orient1

2- page de test initiale (paysage)

Sans surprise, le passage en paysage crée un effet de zoom général. En effet, la largeur de fenêtre demeure à 320px mais s’affiche maintenant dans une surface plus grande (960px au-lieu de 640px en portrait)

3- même page avec initial-scale=1.0 (paysage)

initial-scale=1.0 vient chambouler toutes les règles établies, accrochez-vous :

• bien que la meta viewport impose une valeur “width=device-width”, nous avons bien deux valeurs différentes : width=480px et device-width=320px. Voilà qui est intéressant mais compréhensible puisque le device-width est invariable quelle que soit l’orientation.
• les blocs ayant une largeur définie s’adaptent assez gracieusement à l’orientation : par exemple le bloc de 300px occupe bien environ 3/4 de la surface de 480px, et leur contenu textuel s’adapte également en terme de taille de police. On pourrait donc croire que le bug d’orientation est bel et bien résolu. Mais…
• les blocs fluides demeurent fluides (ouf). Par contre la taille de police de leur contenu textuel ne s’adapte pas du tout ! (testé en pixels, et en em)
• par contre, le contenu généré en CSS (ici “orientation: landscape, etc.”, à la surprise générale… adapte sa taille de police !

Bref, un bel imbroglio :/

Page visible à cette adresse : https://bit.ly/orient2

4- avec initial-scale=1.0 et le fix JavaScript (paysage)

Ici, le constat est simple, le script censé corriger le bug d’orientation à l’époque de l’iOS5 ne change tout simplement rien au problème sur iOS6 :(

Page visible à cette adresse : https://bit.ly/orient3

Conclusion

Au final, on ne sait pas trop sur quel pied danser.

J’imagine que mes tests sont un peu maigres pour en tirer des conclusions hâtives, mais il semblerait que le problème d’orientation ne soit résolu que dans le cas de blocs dimensionnés et non pour des conteneurs fluides. Un comble.

Le pire étant que si des blocs fluides et fixes cohabitent, les effets de zoom de texte différents provoquent un résultat des plus disgracieux.

A suivre dès que nous aurons des informations fiables de la part d’Apple… ou pas.

EDIT : le retour de text-size-adjust !

Finalement, il semble que la propriété (non standard et préfixée) -webkit-text-size-adjust semble à présent parfaitement remplir son rôle, ce qui n’était pas le cas avant.

Voici donc le correctif proposé :

@media (max-device-width:768px) and (orientation:landscape) {
   html {-webkit-text-size-adjust:100%}
}

Tout semble se passer plutôt bien à présent. Merci à eQRoeil et Kiwano

La page en ligne : http://bit.ly/orient4