Поддержка портативного устройства CSS @media в браузерах iPhone и Android

В целях адаптации веб-страниц для мобильных браузеров разработчики могут попытаться использовать Портативные запросы CSS @media для изменения внешнего вида страницы. Однако некоторые платформы, такие как iPhone через Safari, игнорируют этот подход.

Альтернативный подход для iPhone и Android

Чтобы устранить это ограничение, рекомендуемым решением является использовать медиа-запросы, которые определяют конкретные характеристики устройства. Следующий код демонстрирует таргетинг на iPhone (или любое устройство с шириной экрана 480 пикселей или меньше):

Таргетинг на устройства с более высоким Разрешение

Как уже отмечалось, такие устройства, как Droid X, имеют более высокое разрешение, которое может быть не обнаружено вышеупомянутым запросом. Чтобы настроить таргетинг на такие устройства, медиа-запросы могут проверять физические характеристики устройства, такие как разрешение:

Дополнительно Ресурсы

Дополнительную информацию можно найти в статьях A List Apart и рекомендациях W3 по медиа-запросам.