Я пытаюсь создать набор из трех очень простых мультимедийных запросов для обработки диапазона размеров экрана. Вот что я придумал, после того, как куча царапин:
@media all and (min-width: 0px) and (max-width: 480px) { styles here }
@media all and (min-width: 481px) and (max-width: 1023px) { styles here }
@media all and (min-width: 1024px) { styles here }
Это работает так, как я ожидал в браузерах, но когда я указываю на него iphone, он настаивает на отображении силе для среднего размера. Играя с цифрами, я обнаружил, что только с максимальной шириной 980px iphone отвечает на стили внутри этого запроса.
Обратите внимание, что я использовал "все" в этих запросах, чтобы исключить, что делать с кодом "карманный" или "экран, карманный компьютер" и т.д. Попытка упростить, чтобы помочь мне понять проблему.
Я подумал, что это могло иметь какое-то отношение к содержимому страницы, которую я разрабатывал, поэтому я создал тестовую страницу без содержания, чтобы попытаться определить проблему. Он по адресу:
http://rgdaniel.com/test-mediaquery.php
Если я посмотрю на эту страницу с помощью своих браузеров на рабочем столе, она будет вести себя так, как ожидалось, когда я изменю размер окна больше и меньше. Но iPhone сообщает мое сообщение "medium res" при любой заданной максимальной ширине под 980px. Любая помощь приветствуется, спасибо заранее.
При использовании media queries вам нужно добавить это в свой тег head.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это позволяет веб-сайту обнаруживать, что он используется на устройстве.
Вы также можете сделать это,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
Эта часть, user-scalable=0; не позволяет пользователю масштабировать пальцами и полезна, если у вас есть элементы position: fixed.