Медиа-запросы для экранов настольных компьютеров и мобильных устройств

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

@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) {

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

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

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

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

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

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

Нил


css media-queries
person rctneil    schedule 17.06.2012    source источник
comment
у вас гораздо больше шансов получить полезные ответы при решении конкретных вопросов и после некоторых исследований. пожалуйста, обратитесь к часто задаваемым вопросам о stackoverflow, чтобы получить дополнительную информацию об ожидаемом формате для опубликованных вопросов здесь, и соответствующим образом измените свой вопрос. добро пожаловать на борт, кстати   -  person Eliran Malka    schedule 17.06.2012
comment
Это конкретная проблема, медиа-запрос выбирает iPhone в альбомной ориентации, хотя я ожидаю, что это не так. Я сам написал медиа-запрос, и это проблема, с которой я столкнулся. поэтому мой вопрос выше. Вторая часть была просто сопутствующим вопросом. Я знаю два способа сделать это и понимаю их положительные и отрицательные стороны, но хотел бы узнать мнение других людей, ведь в этом нет ничего плохого? Нил   -  person rctneil    schedule 17.06.2012
comment
ничего плохого, я просто сказал, что вы должны разделить это на два вопроса и уточнить, что вы пытались до сих пор   -  person Eliran Malka    schedule 17.06.2012
comment
Обновленный вопрос и опубликовать второстепенную часть теперь отдельно   -  person rctneil    schedule 17.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны добавить orientation : landscape в свой CSS, например:

@media only screen
and (max-device-width : 320px)
and (orientation : landscape) {
    /* Styles */
}
person Vukašin Manojlović    schedule 17.06.2012
comment
Итак, iPhone по-прежнему сообщает о своей ширине как 320 пикселей, даже когда он находится в альбомной ориентации? Если это так, то имеет смысл использовать опцию ориентации - person rctneil; 17.06.2012
comment
Я думаю, что orientation создано для мобильных устройств. Вы не можете использовать его на мониторе компьютера, потому что нет портретной ориентации! - person Vukašin Manojlović; 17.06.2012
comment
Мой совет — попробовать CSS с iPhone. - person Vukašin Manojlović; 17.06.2012