CSS媒体查询仅定位到iPad和iPad？

73

嗨，我正在使用多个平板电脑设备，iPad，Galaxy Tab，Acer Iconia，LG 3D Pad等。

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

我只想使用CSS3媒体查询来定位iPad。由于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用于样式，有什么想法吗？

ipad  css  webkit  media-queries 
— 侯赛因·汗
source
device-aspect-ratio将在iPad上运行，但要使用的正确值为768/1024
— Tom Clarkson

Answers:

141

最终找到了以下解决方案：使用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 */
}

希望这可以帮助。

其他参考：

— 侯赛因·汗
source
万一您想知道，如果设备旋转而不必诉诸Javascript，这将切换样式。
— 戴夫·萨格
1
所有的iPad具有相同的分辨率？我认为不同版本有3种分辨率。而且我猜想无法预测是否还会有更多的解决方案。
— 丹
过去，当我在研究它时，没有iPad Mini。因此，我不知道它报告的屏幕分辨率是多少。但是，此CSS Media Query适用于视网膜iPad。因此，最好在实际设备上进行测试以更加确定。
— 侯赛因汗
1
横屏时设备宽度不是1024px吗？
— Mike Garcia
2
不，据我所知，这些尺寸信息对于设备是固定的。对于定向，您已经具有orientation选择器。
— Hossain Khan
7

我回答这个问题有点晚了，但是以上都不对我有用。

这对我有用

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
— 拜格
source
谢谢，但是在横向和纵向模式之间切换时，对我来说很混乱。所以我必须添加 and (orientation:portrait)并且and (orientation:landscape)CSS不会冲突。因此，对于任何不理解我的意思的人来说，整个媒体查询看起来像是人像：@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { //style }
— Coco
5

您需要使用某些脚本通过其用户代理来定位设备。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
— 比阿特丽斯·奥利维拉（Beatriz Oliveira）
source
在服务器上进行检测有一些好处。一旦在服务器上检测到，我将在响应的主体中添加一个类，以帮助选择CSS。
— Oren 2014年
1
这是最好的答案。基于精确的屏幕像素分辨率和方向来检测特定的第三方设备并不是面向未来的，也不是CSS的目的。服务器端用户代理桥永远不是一个具有歧视性的好解决方案，因此应优先考虑这一点。
— filip 2014年
1
@FilipDalüge这离最佳答案还很遥远。只要您使用媒体查询来解决CSS间距问题，就可以使用将来的版本，也可以在屏幕尺寸完全相同的其他设备上触发，这无关紧要。上面的答案针对的是精确的Mobile Safari版本，该版本基本上没有用，因为它甚至不能在单个世代中处理所有iPad设备。
— Alex W
当媒体查询完成这项工作时，没有人应该这样做。绝对不是最好的答案。
— Telarian
4

很好，同样的问题，也有一个答案=）

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文件

— 丹尼尔·拉夫
source
2 
<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>
— 丹尼尔·拉贾·辛格（Daniel Raja Singh）
source
-1 
/*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.
— 瓦比哈维·珀罗希特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.