1486 sujets

Web Mobile et responsive web design

Règle Media Query (mode paysage) [OnlySmartphone]

Bonjour, je suis en train de bûcher depuis une semaine sur un problème assez embêtant.

Je développe un site web mobile. En mode portrait, la plupart de mes éléments ont une largeur de 80%, j'aimerai qu'en mode paysage (uniquement sur smartphones) la largeur de ces éléments soient de 60% (pour une meilleur expérience).

J'ai donc appliqué cette règle :
@media (orientation: landscape) and (max-width : 600px)

Ce code marche donc parfaitement sur un smartphone android (ici un Wiko CINK Slim), mais la règle est appliqué en mode portrait sur iphone (au lieu d'être en paysage).
Je me suis pas mal renseigné ces derniers jours et j'ai compris qu'il y avait en gros trois tailles à prendre en compte pour les smartphones, taille de la résolution, taille de l'appareil et taille du viewport (vue du navigateur ?!).

Je précise que si je met uniquement le (orientation : landscape) dans la règle, le code est appliqué aux formats PC et Tablettes ce qui n'est pas voulu.

La meta viewport sur le site est :
<meta id="viewport" content="width=device-width, initial-scale=1" name="viewport"></meta>

Que je compte changer en 
<meta id="viewport" content="initial-scale=1" name="viewport"></meta>
d'après le dernier article de Raphaël Goetter.

Y a-t-il un moyen de comprendre et résoudre ce casse tête des médias queries ?

Bon dimanche à tous et merci d'avance.
Modifié par miziflozo (26 May 2013 - 17:18)
Administrateur
Bonjour,

Les valeurs de device-width sont très variables selon les smartphones : http://mobitest.me/devices/

Comme tu le vois, cela peut varier de 320 à 640px, en gros.

L'iPhone a par exemple un device-width de 320px en portrait comme en paysage, c'est pour cela qu'il est forcément concerné (comme beaucoup d'autres) par ta règle (max-width: 600px).

Par contre, il n'est pas possible qu'il soit concerné par "(orientation: landscape)" lorsqu'il est en format portrait. Je n'ai jamais vu ça dans aucune circonstance et je n'ai jamais entendu parler d'un bug de ce genre.
C'est forcément une erreur ailleurs dans ton code.

Si tu veux cibler l'ensemble des smartphones en paysage et pas les écrans de bureau, tu peux opter pour une règle de ce type (très proche de ce que tu as déjà) :

@media (orientation: landscape) and (max-device-width : 640px) {}


Note : tes 2 meta viewport cités auront le même résultat.
Administrateur
miziflozo a écrit :
Manque plus que de trouver un iphone pour tester ca. Smiley smile


Sur quelle base te fondais-tu pour dire que le @media (orientation: landscape) était pris en compte en portrait sur iPhone ?
Tu as le code exact ? un exemple en ligne ?
Sur la base des tests suivants :

-Wiko Cink Slim (Android) : Code qui fonctionne
-Iphone 3 : Bug cité (code appliqué au mode portrait)
-Iphone 4S : Pareil que l'iphone 3

Pour l'exemple en ligne je vais voir si mon boss est d'accord étant donné que c'est un site en cours de développement.

PS : Voici le code appliqué dans la media query :

{
  .subtitle { margin: 15px auto 15px auto; width: 65%; }
  .link { margin: 15px auto 15px auto; width: 65%; }
  .text { margin: 0 auto 0 auto; width: 60%; }
  .formsubmit input[type=submit] { width: 40%; }
  }

Modifié par miziflozo (26 May 2013 - 18:15)
Administrateur
OK.

Dans tous les cas, l'iPhone (toutes versions) ne peut pas être concerné par orientation: landscape quand il est en portrait Smiley ohwell

Tu peux le constater en vérifiant l'orientation dans www.mobitest.me
D'accord, et une dernière chose.

Sur iphone il y a également un problème, quand on passe de portrait à paysage, l'iphone zoom sur la page et rend très mal. J'ai lu sur ton article que c'était dû au :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Le mieux serait de passer au code suivant si je comprend bien ? :
<meta name="viewport" content="initial-scale=1.0">

Est-ce que le premier viewport peut être la cause du bug de mon code media query ?
Modifié par miziflozo (26 May 2013 - 18:31)
Administrateur
miziflozo a écrit :
Sur iphone il y a également un problème, quand on passe de portrait à paysage, l'iphone zoom sur la page et rend très mal. J'ai lu sur ton article que c'était dû au :
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

Je ne pense pas avoir écrit ça sur mon blog.
A priori seul la valeur "width=device-width" seule pose un problème de zoom sur Apple.

Si tu veux être sûr d'empêcher le zoom sur Apple, tu peux ajouter ça à tes CSS : 

/* orientation iOS font-size fix */
@media (orientation: landscape) and (max-device-width: 768px) {
	html,
	body {
		-webkit-text-size-adjust: 100%;
	}
}

miziflozo a écrit :
Est-ce que le premier viewport peut être la cause du bug de mon code media query ?

La valeur de viewport ne peut pas résulter des media queries. Ces derniers ne sont que des tests qui se rapportent justement aux valeurs de viewport.
Bizarre, le code ne marche pas sur un iphone 3S mais marche sur un iphone 4 apparemment.
Des infos là dessus ? ou c'est le 3S qui est buggé.

Par contre toujours le même problème pour les media querry le code est executé en mode portrait sur n'importe quel iphone (3S et 4 testé pour l'instant).

Voici l'URL du site :
http://demomow.cmsformobile.com/p/accueil
Modifié par miziflozo (27 May 2013 - 15:14)
Administrateur
Bonjour,

Ta meta Viewport est assez bizarre, d'où vient l'idée de lui attribuer un id ?

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


De plus, je crois qu'il est plus "sûr" d'écrire initial-scale=1.0 que initial-scale=1

As-tu essayé sans la partie width=device-width ?

Dernier point : tu as pas mal de propriétés qui ne vont vraiment pas faciliter la fluidité de ton design, par exemple quand tu fixes ce genre de largeur :
<body style="width:320px;margin: 0 auto; padding: 0; overflow-x: hidden; -webkit-text-size-adjust: none;">
Bonjour,

Il faut savoir qu'on utilise un CMS propriétaire spécialement conçu pour les sites web mobiles. Le problème étant que ce CMS est assez vieux, il repose sur des fondations de 2003. Pour l'instant on n'a pas accès aux balises meta, je pense que ca sera une demande essentiel pour la suite.

PS : Au niveau du problème sur le iphone 3S, en fait le propriétaire ne faisait aucune mise à jour ios, du coup je pense que ca vient de là, car je suis aller à un magasin Apple tester les différents devices, iphone 5 notamment et ma règle marche nickel.

Est-ce que je peux quand même garder ma règle ou je risque de perdre 10% des utilisateurs d'iphone par exemple qui peuvent avoir le même problème ?

Merci de ton aide.
Sujet clos
Aller à