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

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

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

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

Разбивка того, чего вам следует ожидать:

• В обычных браузерах вы должны получить 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 с отдельными медиа-запросами), так и iPad.

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

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

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

Отличный ответ по использованию цветов для определения устройства и ориентации. 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;
    }
}

Посетите 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 */
}

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

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

Альбомная
ориентация: 90
ориентация: -90

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

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