Медиа-запрос ipad против iphone4

Question

Я использую медиазапрос в css для различения iphone и ipad

Вот мой код:

/* iphone 3 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... }

/* iphone 4 */
@media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... }

/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... }

/* i have the same for landscape */

Теперь у меня конфликт разрешения, iphone 4 использует то же разрешениеipad и наоборот.

Как это исправить?

Answer 1

Измените медиазапрос на iPhone 4, чтобы он отображал пиксельные дисплеи высокой плотности (retina = iPhone4)

@media screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... }

---

Не заметил, что вы вновь открыли вопрос с расширением, так что вот переработанный ответ, предназначенный для iphone (3 и 4) и ipads.

Распределение того, что вы должны ожидать:

• В обычных браузерах вы должны получить teal цвет фона.
• orange на ipad (альбомная).
• black на ipad (портрет)
• red на iphone 4 (портрет)
• pink на iphone 4 (альбомная)
• green на обычных смартфонах, например Android (альбомная)
• purple на обычном смартфоне (портрет)

CSS

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`<!-- language-all: lang-css -->

Я переформатировал @media запросов, найденных в этой прекрасной статье , в CSS-трюках, чтобы соответствовать некоторым битам, специфичным для iphone4, но в целом этот набор медиазапросов должен охватывать оба iphone (3 и 4 с отдельные медиазапросы) и ipads.

Вот демонстрационная версия, которую вы можете попробовать на своих i-устройствах.

http://jsfiddle.net/andresilich/SpbC3/4/show/

И вы также можете попробовать запросы в http://quirktools.com/screenfly/, чтобы увидеть, как они складываются. Тем не менее, сайт screenfly не делает различий между iphone 3 и 4, потому что обычные браузеры пропускают счетчик webkit only -webkit-min-device-pixel-ratio : 1.5, поэтому вы получите лучшие результаты, протестировав его на своем реальном устройстве.

Answer 2

Отличный ответ по использованию цветов для определения устройства и ориентации. iPhone 4 не работал, но отображался только как зеленый или фиолетовый фон.

Я нашел эту статью, которая пролила некоторый свет. http://www.hemmachat.com/2011/04/21/iphone-website-for-good-beginnings/

Теперь, используя вместо этого пиксельное соотношение 2, теперь я могу получить красный и коричневый на iPhone 4.

/* iPhone 4 portrait */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-color:red;
    }
}

/* iPhone 4 landscape */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px){
    body {
        background-color:brown;
    }
}

Answer 3

Я пробовал эту ссылку http://jsfiddle.net/andresilich/SpbC3/4/show/ в адаптивном инструменте тестирования, например http://mattkersley.com/responsive/ и http://ipadpeek.com. Я видел, что ландшафт и портретный режим отображают одно и то же представление. Есть ли проблемы с этими инструментами?

Answer 4

iOS в настоящее время не поддерживает orientation:portrait и orientation:landscape.
Вместо этого Apple в настоящее время использует следующее:

Портрет
ориентация: 0
ориентация:180 (в настоящее время не поддерживается на iphone)

Пейзаж
ориентация: 90
ориентация: -90

Ссылка: http://developer.apple.com/library/safari/#documentation/DataManagement/Reference/DOMWindowAdditionsReference/DOMWindowAdditions/DOMWindowAdditions.html

Answer 5

Проверить http://css -tricks.com / snippets / css / media-query-for-standard-devices /

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}