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

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

64 голосов
/ 25 ноября 2011

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

  • iPad - 1024 x 768
  • LG Pad - 1280 x 768
  • Tab Galaxy - 1280 x 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 для стилей, есть идеи?

Ответы [ 6 ]

124 голосов
/ 29 февраля 2012

Наконец-то найдено решение от: Обнаружение различных платформ устройств с использованием 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: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

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

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

5 голосов
/ 11 июня 2015

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

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

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
3 голосов
/ 25 ноября 2011

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

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

http://css -tricks.com / форум / обсуждение / 12708 / мишень-IPAD-IPAD-только. / 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

2 голосов
/ 18 декабря 2014 
<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>
0 голосов
/ 13 июня 2019

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

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

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

...