Problème en mode paysage avec safari mobile

bonjour à tous,

je viens de mettre en ligne mon site en version responsive. je précise que dans les feuilles html j'ai bien ajouté <meta name="viewport" content="width=device-width, initial-scale=1.0">

j'ai fais plusieurs versions pour différentes tailles d'écrans, et notamment une version de 320 px de large et une version de 412 px de large.

mon soucis est le suivant :

lorsque je teste avec un iphone 5, en mode portrait il m'affiche bien la version 320 px de large, mais en mode paysage, il continu à m'afficher la version 320 px, ce qui donne un texte très gros, car çà donne une version 320 px "zoomée" qui prend tout l'écran, alors que je souhaiterais qu'il m'affiche la version 412 px. avec l'ajout de width=device-width, initial-scale=1.0, la valeur de width devrait être 568 px et non plus 320 px, donc pourquoi ne m'affiche-t-il pas la version 412 px en mode paysage ?

lorsque je regarde alsacreation avec un iphone 5 en mode paysage, çà donne le même soucis : le texte est anormalement gros. hors quand je visite d'autres sites en mode paysage le texte reste de taille normale.

merci d'avance pour vos réponses.
Modifié par ritournelle (29 Jul 2015 - 08:14)

Bonjour,

C'est probablement un vieux bug Apple qui devrait être résolu depuis longtemps.

Peux-tu tester les deux idées suivantes ?

1-

html {
  /* disallow text zooming on orientation change (non standard property) */
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

2- https://github.com/PeterWooster/iOS-Orientationchange-Fix/

Si l'une des deux fonctionne, n'hésite pas à le signaler

Sinon, le sujet m'intéresse car plus personne n'avait parlé de ce bug depuis au-moins 3 ans.

Bonne journée.
Modifié par Raphael (29 Jul 2015 - 08:45)

bonjour, et merci pour votre réponse.

j'ai essayé les deux méthodes mais çà ne change rien. par contre, si je rajoute maximun-scale=1, la version 412 px est bien affichée en mode paysage, mais çà m'embête que les utilisateurs ne puissent plus zoomer.

toutes mes excuses, je viens de réessayer la solution JS proposée plus haut, et çà fonctionne (j'avais oublié de rajouter maximum-scale = 10.0).