Problèmes de mise en page adaptatifs mobiles

Question

J'ai trois mises en page différentes pour différentes largeurs de navigateur. Codé en CSS dans mon index.html comme ceci:

<link rel='stylesheet' media='screen and (max-width: 640px)' href='narrow.css' /> 
 
<link rel='stylesheet' media='screen and (min-width: 641px) and (max-width: 1200px)' href='med.css' /> 
 
<link rel='stylesheet' media='screen and (min-width: 1201px)' href='wide.css' />

Il fonctionne parfaitement sur mon bureau quand je change la taille de la fenêtre du navigateur, et quand je l'ai testé dans plusieurs pages de test de mise en page sensibles.
Problème: ne fonctionne pas sur mon appareil mobile (iphone 5), dans n'importe quel navigateur: il utilise la mauvaise mise en page pour la taille de l'écran. L'atm ne peut pas tester sur d'autres appareils.
Des suggestions?

Answer 1

contrôle balise meta dans votre code HTML, il devrait être

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

alors seulement il sera le travail sur les appareils

lien suivant également se référer

https://css-tricks.com/snippets/html/responsive-meta-tag/