CSS媒体查询仅针对iPad和iPad？

ckocjqey 于 2022-12-24 发布在其他

关注(0)|答案(8)|浏览(206)

嗨，我正在与多个平板设备，iPad，Galaxy Tab，宏碁Iconia，LG 3D Pad等.

平板电脑- 1024 x 768
LG衬垫- 1280 x 768
Galaxy选项卡- 1280 x 800

我想只使用CSS3媒体查询来定位iPad。因为，LG和iPad的设备宽度是相同的768 px-我在分离每个设备时遇到了麻烦。
我尝试了以下方法进行分隔，但似乎不起作用：

@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

来源：https://stackoverflow.com/questions/8271493/css-media-query-to-target-ipad-and-ipad-only

8条答案

按热度按时间

zte4gxcn1#

终于找到了解决办法：Detect different device platforms using 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 */
}

其他参考文献：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

赞(0）回复(0）举报 2022-12-24

628mspwn2#

我回答这个问题有点晚了，但以上这些对我都不起作用。
这对我很有效

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

赞(0）回复(0）举报 2022-12-24

eyh26e7m3#

您需要通过用户代理使用一些脚本来定位设备。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

赞(0）回复(0）举报 2022-12-24

8i9zcol24#

同样的问题，也有一个答案=）
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检查导航器并使用javascript生成/添加css文件

赞(0）回复(0）举报 2022-12-24

ar7v8xwq5#

<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）回复(0）举报 2022-12-24

0qx6xfy66#

现在你可以使用媒体查询4级功能来检查设备是否有能力“悬停”在元素上。

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

由于iPad没有“悬停”状态，你可以有效地瞄准iPad这样的触摸设备。

赞(0）回复(0）举报 2022-12-24

h7wcgrx37#

/*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.

赞(0）回复(0）举报 2022-12-24

gk7wooem8#

这是iPad的

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

这是为iPad pro准备的

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

赞(0）回复(0）举报 2022-12-24

我来回答

CSS媒体查询仅针对iPad和iPad？

8条答案

相关问题

热门标签

最新问答