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

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

50 голосов
/ 17 февраля 2011

Я пытаюсь реализовать альтернативные макеты как для 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 и другие мобильные телефоны будут иметь одинаковые стили?

Ответы [ 4 ]

55 голосов
/ 17 февраля 2011

Поскольку 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 отдельно.

6 голосов
/ 19 октября 2011

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

5 голосов
/ 22 февраля 2012

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

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

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

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

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

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

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

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

4 голосов
/ 21 февраля 2011

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

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

...