Адаптивные макеты мобильных проблем

Question

У меня есть 3 альтернативных макета для разных ширины браузера. Кодовый в CSS в моем index.html так:

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

Он отлично работает на моем рабочем столе, когда я изменить размер окна браузера, и когда я тестировал на нескольких реагирующих страниц тестирования макета.
Проблема: не работает на моем мобильном устройстве (iphone 5), в любом браузере: он использует неправильный макет для размера экрана. atm не может тестироваться на других устройствах.
Любые предложения?

Answer 1

проверка мета-тег в вашем HTML-коде должен быть

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

только тогда он будет работать на устройствах

обратитесь следующей ссылке также

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