CSS media query для таргетинга только на 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 media query. Поскольку ширина устройства 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 для стилей, какие-либо идеи?

672   5  

5 ответов:

наконец-то нашел решение : обнаружение различных платформ устройств с помощью 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 */
}

надеюсь, что это помогает.

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

116  
2017-06-30 20:23:24

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

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

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
4  
2015-06-11 12:13:49
2  
2011-11-25 18:19:14

вам нужно настроить таргетинг на устройство с помощью его пользовательского агента, используя некоторый скрипт. Пользовательский агент для 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
2  
2011-11-25 19:43:06 
<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>
1  
2014-12-18 11:31:19

Comments

    Ничего не найдено.
Click here to cancel reply.