Media query ne marche pas sur les petits écrans.

coucou

Je suis en train de faire du responsive design (avec media query) . Quand je suis sur ordinateur et je rétréci la taille de l'écran ça marche mais quand je suis sur un smartphone ça marche pas.

Si quelqu’un avait une idée. Merci et bonne journée.

Salut,

Les Smartphones et autre appareils mobile simule des tailles d'écrans qui ne sont pas les leur par exemple ton Smartphones peut simuler une taille de 1024px au lieu des 500px qu'il fait en réalité.
Pour forcer ces appareils a donner leurs vrai taille d'écran ( mais je ne sais pas si c'est efficace à 100%).
Insérer dans le code HTML :
- <media name="viewport" content="width-device-width) />
et dans le CSS dans les media queries:
- remplacer: (max-width: 500px) par max-device-width: 500px).

Bonsoir,

En effet, le Viewport d'un mobile est une notion assez complexe à appréhender.

Je t'invite à consulter cet article détaillé sur le sujet : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

thenif a écrit :
Insérer dans le code HTML :
- &lt;media name=&quot;viewport&quot; content=&quot;width-device-width) /&gt;.

Attention : la valeur "width=device-width" seule pose des "problèmes" d'orientation sur iPhone et iPad (voir les détails dans l'article cité)
Modifié par Raphael (28 Oct 2013 - 18:10)