[Résolu] Mettre le zoom à 1 lors du passage portrait / paysage

Bonsoir les gens !

Je rencontre un problème depuis maintenant un moment et je n'ai trouvé aucune solution jusqu'à aujourd'hui..

Quand je suis sur ma version mobile portrait, mon site s'affiche impeccablement grâce à la balise meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

En revanche, quand je passe en mode paysage ou la, le site est censé afficher la version desktop, je me retrouve zoomé dans la page. En dézoomant, la version desktop remplit parfaitement la largeur de l'écran, mais je suis obligé de le faire manuellement.

Ma question est donc simple, y a t'il un moyen pour qu'en version paysage, quand on retourne le téléphone en étant sur le site, celui ci s'affiche avec un initial scale à 1 exactement comme il le fait en mode portrait ?

Merci d'avance à ceux qui éclaireront ma lanterne !
Modifié par ganondorf150 (28 Aug 2014 - 20:50)

Bonjour,

Sur quel navigateur(s) / smartphone(s) rencontres-tu ce comportement ?

C'était un phénomène présent sur les device Apple, mais ils l'ont "normalement" corrigé depuis l'iOS6.

Essaye d'appliquer la propriété non standard "text-size-adjust" et regarde si ça change quelque chose :

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

(plus d'infos sur cette page : http://knacss.com/knacss.html)

Bonne chance !

Salut Raphael et merci pour ta réponse !

J'ai testé ce que tu m'a dis et j'ai récupéré quelques petites propriétés CSS bien utiles sur Knacss mais mon problème est toujours la.

Je fais mes test sur iPhone 5 avec iOS 7. Je ne pense pas qu'il s'agisse d'un bug car j'obtiens le même rendu sous :
- chrome 36
- safari 7
- opera mini et opera coast

J'ai eu l'occasion de regarder sur un Blackberry z10 et un Sony Xperia Z et même rendu.
Voici quelques screens pour imager mon problème :

Ce que j'ai en portrait (affichage normal) :
http://s2.postimg.org/9u91eqr4p/photo_1.png

Ce que j'ai en paysage (affiche zoomé) au rafraichissement et lorsque je tourne mon iPhone :
http://s11.postimg.org/dzccbeeg3/photo_2.png

Ce que je veux avoir en paysage au rafraichissement et lorsque je tourne mon iPhone :
http://s16.postimg.org/km1rcizzp/photo_3.png

Ce que j'ai en portrait après avoir dézoomé l'affichage paysage pour que mon site prenne 100% de l'écran et retourné le téléphone en mode portrait :
http://s3.postimg.org/dd3lg7wyb/photo_4.png

Désolé pour les screens qui ont des tailles différentes et qui sont floutés mais je n'ai pas pu faire autrement. Cela suffit quand même à comprendre le problème que je rencontre !
Peut être que ce n'est tout simplement pas possible de contrôler ce niveau de zoom, mais je veux y croire !

Est-ce que tu peux tester avec des sites dont je connais bien le code, par exemple knacss.com, goetter.fr ou mydevice.io ?

Ces sites ont été testés sur iPhone 5 iOS7 notamment et il n'y a pas de zoom lors du changement d'orientation.
Le comportement a été décrit (et corrigé) dans cet article (cf. partie "Bugs de zoom au format paysage").

Oui j'avais lu cet article justement !

Quand je change l'orientation de mon téléphone sur tes sites, tout fonctionne très bien, pas besoin de zoomer / dézoomer, mais tu as des media queries pour le landscape qui définissent une width à 100% aussi non ?

Moi dans mon cas, il n'y a pas de mediaqueries pour version landscape : quand je passe mon mobile en paysage, c'est la version desktop qui s'affiche, mais zoomé

Si tu veux je peux fournir un lien de mon serveur de préprod, mais en MP car c'est un projet pour une marque connue.

Finalement après avoir relu ton article et j'ai modifié ma meta viewport en y ajoutant un height=device-height. Et la, plus aucun problème quand je passe en mode paysage, le zoom est nickel !

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 

J'aurais du faire ça dés le début avec un peu de recul, mais intégrer le height n'était pas dans les attributs "suggérés" sur les différents site que j'ai visité..
Tu ne le recommande d'ailleurs pas vraiment dans l'article d'ailleurs :

a écrit :
En définitive, il semble que la valeur la plus robuste pour l'ensemble des périphériques soit une addition de "width" et de "initial-scale" :

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

Je ne pense pas qu'intégrer cet attribut ai des conséquences négatives sur le responsive, du coup pour mes prochains projets, je mettrai par défaut l'attribut height=device-height dans ma balise meta viewport !

En tout cas merci pour ton aide Raphael ! T'es l'meilleur

A bientôt !
Modifié par ganondorf150 (29 Aug 2014 - 14:55)

Sujet résolu !

Bonjour,
je me permets de relancer ce topic…malgré des tentatives avec height/width/scale de la balise viewport, je rencontre un problème avec le passage en mode paysage. Si je charge le site en mode paysage, tout
va bien. Mais si je change l'orientation en portrait puis de nouveau en paysage, alors il zoome…

J'ai essayé d'ajouter le JS suivant lors du changement d'orientation mais ça ne résout rien, au contraire.

    document.querySelector("meta[name=viewport]").setAttribute(
          'content', 
          'width=device-width, initial-scale=1.0');

URL d'exemple :
http://www.parisdigest.com/menus/mobile.htm

Merci d'avance !