Как настроить iPhone 3GS и iPhone 4 в одном запросе на медиа?

Я пытаюсь реализовать альтернативные макеты как для iPad/iPhone, так и для старых iPhone.

Я установил, что лучшим методом является использование @media из спецификации CSS3.

Как таковые, это мои медиа-запросы в минуту:

@media screen and (max-width: 1000px) { ... }

Выше - для небольших экранов для настольных компьютеров и ноутбуков.

@media screen and (max-width: 700px) { ... }

Выше для iPad и ОЧЕНЬ маленьких экранов для настольных компьютеров/ноутбуков.

@media screen and (max-device-width: 480px) { ... }

Выше для iPhone 3GS и мобильных устройств в целом.

Тем не менее, новый iPhone 4 со стильным шоу "Retina" Стив Джобс означает, что он имеет соотношение пикселей 2-1, что означает, что 1 пиксель на самом деле появляется в браузере как 2x2 пикселя, что делает его разрешение (960x640 - это означает, что это приведет к планированию iPad, а не к макету мобильного устройства), поэтому для этого требуется еще один мультимедийный запрос (пока поддерживается только webkit):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Итак, дело в том... Я хочу, чтобы мой красивый блестящий новый макет iPhone 4 был объединен с iPhone 3GS и макетом мобильных устройств, поскольку они оба будут иметь одинаковый внутренний CSS-код,

Поэтому задаю вопрос:

Как создать правило @media, которое указывает на iPhone 4, 3GS и другие мобильные телефоны на одинаковые стили?

Ответ 1

Поскольку iPhone и iPod touch измеряют max-device-width в логических пикселях, а не в физических пикселях даже с дисплеем Retina (как и должно быть), исходного медиа-запроса, используемого для iPhone, должно быть достаточно:

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

Вам понадобится только (-webkit-min-device-pixel-ratio: 2), если вам нужно настроить таргетинг на дисплей Retina отдельно.

Ответ 2

Ответ BoltClock кажется мне очень приятным на данный момент.

Однако, думая в будущем, если Apple (или другой производитель) выпустит другое устройство с соотношением пикселей устройства 2, этот медиа-запрос будет использован и для этого устройства.

Я не думаю, что не исключено, что это произойдет, и что новое устройство может иметь гораздо больший экран, например iPad с дисплеем сетчатки.

Чтобы сделать этот запрос применимым только к iPhone 4 и предыдущим iPhone (и любому другому устройству аналогичного размера)

@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
}

Не уверен, что [[IPHONE_4_WIDTH]] прямо сейчас - у меня его нет, а некоторые сайты говорят 480, некоторые говорят 960. Попробуйте заменить оба. (И дайте мне знать, что вы найдете:))

Ответ 3

Я искал способ специально настроить iPhone 3/3GS на вторую часть запроса. Наиболее приемлемым решением, которое я нашел, является адаптация медиа-запросов к фиксированным параметрам iPhone 3.

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

Для работы с этим запросом требуется, что вы используете Safari метафайл тега просмотра, чтобы исправить браузер до 100% со следующим:

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

Есть небольшое количество телефонов Android, которые также будут подхвачены по этому запросу. В Android Market, показывающем 18,4% активных телефонов в потенциальном размере экрана 320x480, только подмножество этого будет соответствовать коэффициенту пикселя устройства в браузере webkit. Не идеально, но лучше, чем ничего.

Списки телефонных разрешений

Немного устаревший, но тщательный: http://cartoonized.net/cellphone-screen-resolution-by-size.php
Только 3 перечисленные здесь потенциальные совпадения: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
Еженедельный снимок Android Market: http://developer.android.com/resources/dashboard/screens.html

Вся информация рассматривалась как дата публикации.

Также на комментарий mernen # 2 к его сообщению здесь относятся документы для целевых устройств Android по плотности пикселей: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

Ответ 4

Я не уверен, что следую твоему вопросу. Вы пробовали свои запросы на iPhone 4? device-width измеряется в логических пикселях, а не в физических, поэтому iPhone 4 по-прежнему соответствует критерию max-device-width: 480px.

То же самое касается высококлассных Android-смартфонов с соотношением пикселей 1,5: Nexus One имеет физический экран 480x800, логический экран 320x533.