Как предотвратить влияние CSS для iPad / iPhone на старые браузеры?

Question

Per Инструкции Apple для разработчиков . Я использую следующий CSS-код для работы только с iPad и iPhone. Однако CSS, похоже, влияет и на старые браузеры (например, Firefox 3.5). Любые предложения о том, как настроить таргетинг только на iPad / iPhone или только на Firefox 3.5, но не на оба?

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

Answer 1

Медиа-запросы основаны на размере экрана (между прочим). Чтобы настроить таргетинг на iphone, вам нужно изменить запрос на что-то вроде:

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

}

Это будет предназначаться только для устройств с максимальным разрешением экрана 480px

Вы можете прочитать больше здесь: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

И я бы обязательно посмотрел новую Отзывчивую книгу о дизайне от A Book Apart - действительно очень хорошо