Media Queries и поворот экрана смартфона

[Bugert]

Всем привет. Задал через @Media поведение ширины слоев под разные разрешения. По такому типу:

 

@media screen and (max-width: 720px){

body{
width: 640px;
}

div.nav{
width: 640px;
}

}

 

Проверил на телефонах. При ландшафтной ориентации экрана слои не растягивают на ширину экрана. Например у телефона разрешение 320x480. У меня медиа заданы и под 320 и под 480. И по идеи, при перевороте сайт должен тянуться на 480px. Можно ли это как-то исправить? 

Edited May 12, 2014 by Bugert

[SelenIT]

Meta viewport с width=device-width стоит? А вообще для orientation свой собственный MQ существует...

[Bugert]

Указал  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />. 

Указывал и and (orientation: landscape), но с этим у меня вообще всё съезжает. 

[Bugert]

Разобрался. Просто ступил. Дело в том, что я указывал @media screen and (max-width: 480px){стили под 320px}, а это значит - при ширине, меньшей или равной 480px. Т.е. при ландшафтном развороте экран имел ширину 480px и условие выполнялось правильно. Нужно было просто указать max-width: 479px.

 

Я вот только теперь не понимаю, а зачем может понадобится orientation:landscape ?)

Edited May 13, 2014 by Bugert

[npofopr]

а зачем может понадобится orientation:landscape

для  orientation:landscape.

Вы лучше найдите хорошую статью по MQ. И все сразу станет понятно.

[Bugert]

 

а зачем может понадобится orientation:landscape

для  orientation:landscape.

Вы лучше найдите хорошую статью по MQ. И все сразу станет понятно.

 

 

Конечно, понятно, что для orientation:landscape. Статьи я уже читал. Но где на практике это может быть полезно, если достаточно просто @media screen and (max-width: Npx)? Ведь дизайн и так тянется на ширину экрана при его повороте.