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

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

  • iPad - 1024 х 768
  • LG Pad - 1280 х 768
  • Галактика Tab - 1280 х 800

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

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

@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 для стилей, есть идеи?

Источник

9 ответов

Решение

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

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.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
   }
Источник

Вам необходимо настроить таргетинг на устройство с помощью его пользовательского агента, используя некоторый скрипт. Пользовательский агент для 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
Источник

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

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

Источник 
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>
Источник

это для ipad

      @media all and (device-width: 768px) {
  
}

это для ipad pro

      @media all and (device-width: 1024px){
  
}
Источник

В наши дни вы можете использовать функцию Media Queries Level 4, чтобы проверить, есть ли у устройства возможность "навести курсор" на элементы.

@media (hover: hover) { ... }

Поскольку ipad не имеет состояния "зависания", вы можете эффективно настраивать таргетинг на сенсорные устройства, такие как ipad.

Источник 
/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
  body{
    background: red !important;
  }  
}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
  body{
    background: green !important;
  }   
}

In the media query of specific devices, please use '!important' keyword to override the default CSS. Otherwise that does not change your webpage view on that particular devices.
Источник

CSS для iPad 9 и iPad 10:

      /* iPad 9th Gen */
@media only screen 
    and (min-device-width: 810px) 
    and (max-device-width: 1080px)
    and (min-device-pixel-ratio: 2) {
        /* rules here */
    }

/* iPad 10th Gen */
@media only screen 
    and (min-device-pixel-ratio: 2) {
        /* rules here */
}
Источник
Другие вопросы по тегам