Запрос СМИ не работает для iPhone и iPad

Question

@media запрос не работает в случае iPhone 5 и iPad 4 ОС. Я использовал следующий CSS для стилизации каждой ОС и устройства для разных экранов.

Я явно проверил, что мой IPad и iPhone ширина и высота и на основе этого только я сохранил медиа-запросы. Это работает штраф на ANDROID OS.

/*@media print {*/ 
/* iPhone 5 (Portrait) */ 
@media screen and (max-device-height: 568px) and (orientation: portrait) { 
    #map_canvas { 
     border: 1px dashed #C0C0C0; 
     width: 290px; 
     height: 473px; 
     } 
} 

/* iPad 4 (Portrait) */ 
@media screen and (max-device-height: 1024px) and (orientation: portrait) { 
#map_canvas { 
    border: 1px dashed #C0C0C0; 
    width: 735px; 
    height: 929px; 
    } 
} 

/* iPad 4 (Landscape) */ 
@media screen and (max-device-width: 1024px) and (orientation: landscape) { 
    #map_canvas { 
    border: 1px dashed #C0C0C0; 
    width: 990px; 
    height: 673px; 
    } 
} 

/* Samsung 10.1 inch (Portrait) */ 
@media screen and (max-device-height: 1280px) and (orientation: portrait) { 
#map_canvas { 
    border: 1px dashed #C0C0C0; 
    width: 790px; 
    height: 1140px; 
    } 
} 

/* Samsung 10.1 inch (Landscape) */ 
@media screen and (max-device-width: 1280px) and (orientation: landscape) { 
#map_canvas { 
    border: 1px dashed #C0C0C0; 
    width: 1230px; 
    height: 680px; 
    } 
} 

/* Samsung 7.0 inch (Portrait) */ 
@media screen and (max-device-height: 1024px) and (orientation: portrait) { 
#map_canvas { 
    border: 1px dashed #C0C0C0; 
    width: 570px; 
    height: 875px; 
    } 
} 

/* Samsung 7.0 inch (Landscape) */ 
@media screen and (max-device-width: 1024px) and (orientation: landscape) { 
    #map_canvas { 
    border: 1px dashed #C0C0C0; 
    width: 990px; 
    height: 455px; 
    } 
} 

@media all and (orientation: landscape) { 
    html, body { 
    height: auto; 
    } 
} 

Каждый раз, когда я тестировал различные изменения в приведенном выше коде, я получаю LAST CSS для применения стиля.

Я нашел одну ссылку, которую я еще не пробовал, но собираюсь попробовать в ближайшее время, так как Mac доступен), но у вас тоже есть вопрос (iphone/ipad media query issues). Может ли кто-нибудь объяснить причину, по которой это соотношение пикселей в этом случае?

Answer 1

Выдержки из http://mislav.uniqpath.com/2010/04/targeted-css/

Вы должны знать, что запрос ориентации СМИ, хотя поддерживается на IPad, не работает на iPhone (протестировано с v3.1.3). К счастью, запросы размера, такие как ширина и ширина устройства, работают с возможностью компоновки без JavaScript с некоторой их комбинацией.

Answer 2

Причина в том, что новые устройства Apple имеют более высокую плотность пикселей. Вы должны поместить этот мета-тег в голове документа и ваши медиа-запросы будут работать везде:

<meta name="viewport" content="width=device-width"> 

Кстати, чем выше соотношение пикселей для новых продуктов яблока называется «сетчатка дисплей.»

Если у вас есть доступ iPhone, IPAD, и т.д. ... попробуйте просмотреть этот сайт:

http://mattstow.com/viewport-size.html

на этих устройствах, чтобы увидеть размер окна просмотра устройства. Затем добавьте метатег, и вы увидите, что размер видового экрана изменяется.