Медиа-запросы - Css только для iPhone Пейзаж

Question

Есть ли такие же методы для написания CSS только для iPhone в ландшафтном режиме?спасибо

Answer 1

Да, конечно. Проверить: http://www.w3.org/TR/css3-mediaqueries/#orientation

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

Если вы хотите настроить таргетинг только на iphone, вам нужно добавить разрешение или плотность dppx к этим MQ.

Answer 2

Вы могли бы сделать это

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

Это заставляет iPhone отображать область просмотра так же, как ширина устройства.

Затем используйте эту CSS для наведения на ландшафтный режим, ширина которого +320px

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

Answer 3

Если я вас правильно понимаю, и вы хотите знать медиазапросы для смартфона, такого как iPhone, только когда он находится горизонтально, попробуйте что-то вроде этого:

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* styles go here */
    body {

    }
}

Answer 4

на самом деле, если вы используете:

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

, тогда вы не сможете увеличить масштаб в любое время, что может вызвать проблемы с удобством использования.

Я бы порекомендовал вам использовать:

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

В этом случае вы заставляете свою страницу отображаться в исходном начальном масштабе, и тогда вы можете настроить таргетинг на разные размеры с помощьюМедиа-запросы, так как макет будет изменен при повороте вашего iPhone:

@media only screen and (min-width: 480px) {
    /* landscape mode */
}

@media only screen and (max-width: 479px) {
    /* portrait mode */
}

И пользователь по-прежнему может сжимать страницу для увеличения.