медиазапросов для настольных экранов и экрана мобильного

Question

У меня есть этот медиа-запрос:

@media only screen 
and (max-width : 320px), 

only screen 
and (max-device-width : 320px) 
and (min-device-pixel-ratio : 2), 

only screen 
and (max-device-width : 320px) 
and (-webkit-min-device-pixel-ratio : 2), 

only screen 
and (max-device-width : 320px) { 

Он выбирает браузеры на рабочем столе меньше, чем 320px в ширине, iphone 4-й в портретном, но он также выбирает IPHONE 4-й в ландшафте. Неужели это НЕ должно выбрать iPhone 4 в пейзаже?

С моей точки зрения, первая часть выбирает экраны шириной менее 320 пикселей.

Вторая часть же, как второй, но с префиксом поставщика WebKit

Третья часть выбирает экраны на мобильных устройствах меньше, чем 320px в ширину, но с двойной плотностью пикселей (iPhone 4/4s в данном случае)

и занимает четвертое место часть такая же, как и в предыдущих двух, но без плотности двойного пикселя, поэтому должна выбрать iPhone 3gs и другие мобильные устройства, которые имеют экраны максимальной ширины 320 пикселей. Поэтому, исходя из вышеизложенного, не ожидайте, что он будет выбирать ландшафтный режим на любом iPhone?

Любые идеи, как добавить к нему решение этого?

Neil

Answer 1

Вы должны добавить orientation : landscape в свой CSS, как это:

@media only screen 
and (max-device-width : 320px) 
and (orientation : landscape) { 
    /* Styles */ 
}