Правильные параметры media queries, как поступить?

Делал не одну адаптивную верстку с помощью media queries. При этом в большинстве случаев придерживался следующей структуры:
media only screen and (min-width : 320px) and (max-width : 479px)
media only screen and (min-width : 480px) and (max-width : 629px)
media only screen and (min-width : 630px) and (max-width : 767px)
media only screen and (min-width : 768px) and (max-width : 849px)
media only screen and (min-width : 850px) and (max-width : 991px)
media only screen and (min-width : 992px) and (max-width : 1023px)
media only screen and (min-width : 1024px) and (max-width : 1199px)
media only screen and (min-width : 1200px) and (max-width : 1379px)
media only screen and (min-width : 1380px) and (max-width : 1920px)
и считал что этого достаточно, но вот возник спор с клиентом по отображению сайта на ipad, его скрины существенно отличались от изображения на том же deviceponsive.com или же screenfly
Я задался вопросом в чем дело, и поймал себя на мысли что для IOS устройств media queries прописываются по-другому. Но как это сделать что бы не плодить и так уже кучу media queries и чтобы они не пересекались с обычными медиа запросами?
  • Вопрос задан
  • 5588 просмотров
Решения вопроса 1
Прописываются они точно так же.
iPad горизонтальный и вертикальный режимы:
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px) { ...}


iPad mini:
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {...}


Если у вас не mac os, возьмите виртуалку, под vmware player, с образом mac os, поставьте xcode, в ней можно запустить симулятор iPad и смотрите, что сломалось.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы