Адаптация макета к изменению ориентации экрана

Question

Я новичок в адаптивной/гибкой веб-разработке. Я смущен тем, как мобильные устройства обрабатывают изменение разрешения экрана при изменении ориентации устройства.

Если я создаю два мультимедийных запроса - один для 320 (портретный) и один для 480 (пейзаж), iphone загружает только версию 320, независимо от ориентации, и просто масштабирует, чтобы заполнить экран.

Есть ли способ доставки новых 480 стилей, когда iphone загружен в альбомной ориентации или когда iPhone наклонен от портрета к пейзажу?

Answer 1

Прежде всего запросов СМИ имеет свойство, что вы, вероятно, обнаружили

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

Вы могли бы заставить оказывать на iPhone через

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> 

, а затем использовать некоторые CSS целевых ландшафтного режима

@media screen and (min-width: 321px){ 
    //styles 
} 

Answer 2

Запросы мультимедийных сообщений CSS немного сложны с ориентацией на устройство для анота ее. У вас еще есть хороший Js варианта:

window.addEventListener('orientationchange', changeOrientation, false); 

function changeOrientation() { 
if (orientation == 0 || orientation == 180) { 
    //portraitMode 
} 
else { 
    //LandscapeMode 
}