Media Queries - CSS только для iPhone

Ответ 1

Вы можете сделать это

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

    }
}

Ответ 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 */
}

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

Ответ 5

Вот лучший источник, где вы можете найти все медиа-запросы

http://nmsdvid.com/snippets/