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

Question

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

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

Спасибо!

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

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

Answer 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 шириной ровно 786 пикселей, но мне так и не удалось увидеть стили.

Answer 2

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

Answer 3

Это довольно упрощенная демонстрация: http://css -tricks.com / snippets / css / ipad-specific-css /