Как настроить CSS для iPad, но исключить рабочий стол Safari 4 с помощью медиа-запроса?

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

Я использовал

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

но только что узнал, что рабочий стол Safari 4 читает его. Я попробовал варианты с "481px" вместо "768px", а другой, который добавляет ориентацию на это:

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

но не повезло. (Позже мы будем обнюхивать строки пользовательского агента для iPad, но пока это решение не будет работать.)

Спасибо!

Обновление: кажется, что на рабочем столе Safari на данный момент используется ширина и высота экрана, и на основе этого создается ориентация портрета или пейзажа. Похоже, что ширина и высота будут исключать браузеры для настольных компьютеров (если только я чего-то не хватает).

http://mislav.uniqpath.com/2010/04/targeted-css/

Ответы

Ответ 1

 media="only screen and (device-width: 768px)"

Спасибо Миславу Мароничу за ответ!

Это работает для iPad в любой ориентации и, кажется, исключает рабочий стол Safari.

Когда я тестировал (min-device-width: 768px) and (max-device-width: 1024px) Я мог видеть Safari 4, используя стили, или игнорируя их, когда я расширил или сузил окно. При тестировании (device-width: 768px) я попытался сделать браузер Safari на рабочем столе ровно 786px, но я никогда не видел его.

Ответ 2

Я использую PHP для этого. Я изолирую форму пластины от строки USER_AGENT. Тогда мне нужно использовать только if($plateform == 'iPad') {.....} Это легко!