@media не работает для iphone 5

Question

Я использую эмулятор в настоящее время на http://mobiletest.me/, но мой сайт повсюду. Медиа код, я использую это:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) 

но не представляясь использовать этот носитель запрос и использует мой другой запрос для Ipad с является @media (max-width:768px)

Я использую эту мету в моем HTML:

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

у меня есть запросы средств массовой информации в порядке 1600px 1280px 768px и т.д. по убыванию

Answer 1

пытаются использовать:

@media only screen and (min-width:320px) and (max-width: 568px){} 

Answer 2

device-width относится к фактической ширине используемого устройства, а не ширине видового экрана.

В вашем примере:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) 

Может предназначаться 'портрет' вид iPhone 4 в (640px).

Это важно, потому что iPhone 4 (и многие другие мобильные устройства, если на то пошло), например, набирает 2 пикселя на пиксель «CSS». Это означает, что ширина устройства iPhone 4 равна 320px/480px, тогда как ширина видового экрана на самом деле равна 640px/960px.