Adaptives Layout mobile Probleme

Question

Ich habe 3 alternative Layouts für verschiedene Browserbreiten. Codiert in CSS in meiner index.html etwa so:

<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' />

Es funktioniert perfekt auf meinem Desktop, wenn ich die Größe des Browserfensters zu ändern, und wenn ich es getestet in mehreren ansprechenden Layout Testseite.
Problem: funktioniert nicht auf meinem mobilen Gerät (iPhone 5), in jedem Browser: Es verwendet das falsche Layout für die Bildschirmgröße. atm kann nicht auf anderen Geräten getestet werden.
Irgendwelche Vorschläge?

Answer 1

Check-Meta-Tag in Ihrem HTML-Code sollte es

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

dann nur wird es sein, die Arbeit an Geräten

refer folgenden Link auch

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