Медиа-запросы, не реагирующие на изменения ориентации на iPhone 5

По какой-то причине iPhone 5 не меняет расположение моего сайта при его повороте с портрета на пейзаж или наоборот. Таким образом, если страница загружена в портретном режиме, запросы на портретный носитель, я определил удар и отредактировал сайт, но затем, если он повернут, макет остается оптимизированным для портретного вида. Если я обновляю страницу вручную, но пейзаж будет загружен, но при повороте телефона он не изменится на портрет, если он не обновится снова.Медиа-запросы, не реагирующие на изменения ориентации на iPhone 5

Вот основной код из моего CSS документа:

/* Normal CSS for Desktop Site*/ 

@media only screen and (orientation:landscape) and (max-device-width: 568px), (max-width: 568px){ 

/*iPhone 5 Landscape Styles */ 

} 

@media only screen and (orientation:landscape) and (max-device-width: 480px), (max-width: 480px){ 

/*iPhone 4/4s Landscape Styles*/ 

} 

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

/*All iPhones Portrait Styles*/ 

}

И это из <head> моих HTML-файлов:

<!-- WEB APP META --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<link href="/img/webapp/default-iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> 
<link href="/img/webapp/[email protected]" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> 
<link rel="apple-touch-icon" sizes="114x114" href="/img/webapp/touch-icon-114.png" />

Эта проблема происходит только на iPhone 5. СМИ запросы работают на других iPhone. Я искал вокруг и испортил код, но ничего не работает.

Ссылка на сайт here, если вы хотите взглянуть. Примечание: только домашняя страница работает

Заранее спасибо.

источник

2013-07-14 AidenH

Это, как вы стиль средств массовой информации для iPhone 5

iPhone 5 в портретной & пейзаж

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 в ландшафтном

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 в портретном

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

источник

2013-07-14 09:57:53 Vector

Хорошо. Я попробую. Благодарю. – AidenH

является первым необходимым? И вам нужно сделать это для каждого варианта iOS (сейчас их много: <5, 5/5S, 6, 6+, и я не знаю, сколько iPads). – Madivad

Медиа-запросы, не реагирующие на изменения ориентации на iPhone 5

ответ

Смежные вопросы