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

Ответ 1

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

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

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

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

• В обычных браузерах вы должны получить цвет фона teal.
• orange на ipad (пейзаж).
• black на ipad (портрет)
• red на iphone 4 (портрет)
• pink на iphone 4 (пейзаж)
• green на обычных смартфонах, например, андроидах (пейзаж)
• 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, но в целом этот набор запросов мультимедиа должен охватывать как iphones (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, поэтому вы получите лучшие результаты, проверяющие его на своем реальном устройстве.

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

Ответ 3

Отъезд http://css-tricks.com/snippets/css/media-queries-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 */
}

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

Ответ 5

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