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

Question

[sergey]

Делал не одну адаптивную верстку с помощью 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 и чтобы они не пересекались с обычными медиа запросами?

Answer 1

[Maksim Zverev]

Прописываются они точно так же.
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 и смотрите, что сломалось.

Comments

[sergey]

то есть фактически разница в -device-? Меня коробило то что я уже задал размер от 768 до 1024 для обычных устройств, и получиться дубляж.