CSS-медиа-запрос для iPad и iPad?

Привет, я работаю с несколькими планшетными устройствами, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad и так далее.

  • iPad – 1024 x 768
  • LG Pad – 1280 x 768
  • Galaxy Tab – 1280 x 800

Я хочу настроить iPad только с использованием медиа-запросов CSS3. Так как ширина устройства LG и iPad равна 768px – у меня возникают проблемы с разделением каждого устройства.

Я попытался следовать, чтобы отделить, но, похоже, не работает:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ @media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */ 

Я не знаю параметры –webkit-device-pixel-ratio и другие параметры -webkit * и их значения для iPad. Я не хочу использовать JavaScript для стилей, любые идеи?

Наконец, нашли решение: Обнаружение различных платформ устройств с помощью CSS

   

Чтобы уменьшить HTTP-вызов, это также можно использовать внутри существующего общего файла CSS:

 @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .ipad-portrait { color: red; } /* your css rules for ipad portrait */ } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ } 

Надеюсь это поможет.

Другие ссылки:

Я немного опоздал, чтобы ответить на это, но ни один из вышеперечисленных не работал для меня.

Это то, что сработало для меня

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { //your styles here } 

Ну совсем такой же вопрос и есть и ответ =)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

 @media only screen and (device-width: 768px) ... @media only screen and (max-device-width: 1024px) ... 

Я не могу проверить его в настоящее время, поэтому, пожалуйста, проверьте его =)

Также нашел еще несколько:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Или вы проверяете навигатор с помощью javascript и генерируете / добавляете файл css с javascript

Вам нужно настроить таргетинг на устройство через User Agent, используя некоторый скрипт. Пользовательский агент для iPad:

 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 
   orientation and device detection in css3          
iphone landscape
iphone portrait
ipad landscape
ipad portrait
htc desire landscape
htc desire portrait
desktop
  • Запросы СМИ не ведут себя так, как ожидалось на Android
  • @Media min-width & max-width
  • Запуск jquery с запросами css media
  • $ (window) .width () не совпадает с запросом медиа
  • CSS Media Query - Soft-клавиатура нарушает правила ориентации CSS - альтернативное решение?
  • Может ли медиа-запрос изменять размер на основе элемента div вместо экрана?
  • Расширение селекторов из медиа-запросов с помощью Sass
  • Медиа-запросы и фоновые изображения
  • Как я могу избежать перекрытия медиа-запросов?
  • Каковы правила совпадения запросов медиа-запросов CSS?
  • Как кодировать мультимедийные запросы CSS, предназначенные для ВСЕХ мобильных устройств и планшетов?
  • Давайте будем гением компьютера.