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

Question

Я пытаюсь реализовать альтернативные макеты для 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 с поющим танцующим "сетчатым" дисплеем Стива Джобса означает, что он имеет соотношение пикселей 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 и другие мобильные телефоны на те же стили?

Answer 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 отдельно.

Answer 2

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

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

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

Чтобы сделать этот запрос применим только к 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. Попробуйте заменить на оба. (И дайте мне знать, что вы найдете:))

Answer 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

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

Кроме того, согласно комментарию № 2 Мернена к его сообщению, здесь приведены документы, нацеленные на устройства Android по плотности пикселей: http://developer.android.com/guide/webapps/targeting.html

Answer 4

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

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