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

您好，我正在使用多种平板电脑设备，iPad、Galaxy Tab、Acer Iconia、LG 3D Pad等

• iPad-1024x768
• LG垫-1280 x 768
• Galaxy选项卡-1280 x 800

我只想使用CSS3媒体查询来定位iPad。因为，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 */

---

我不知道iPad的-webkit设备像素比率和其他-webkit*选项及其目标值。我不想将JavaScript用于样式，有什么想法吗？

好吧，同样的问题，还有一个答案=）

我当前无法测试它，请测试它=）

还发现了更多：

---

或者，您使用一些javascript检查导航器，并使用javascript生成/添加css文件。您需要使用一些脚本，通过其用户代理以设备为目标。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

---

最终从以下方面找到了解决方案：

希望这有帮助

其他参考资料：

css3中的定位和设备检测
iphone环境
iphone人像
ipad环境
ipad人像
htc欲望景观
htc欲望肖像
桌面
函数res（）{document.write（screen.width+，'+screen.height）；}
res（）；

我回答这个问题有点晚了，但上面的任何一个都不适合我

这就是我的工作

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

现在，您可以使用一项功能来检查设备是否具有该功能

由于ipad没有“悬停”状态，您可以有效地瞄准像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.

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

这是给ipad pro的

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

---

设备纵横比可以在iPad上使用，但正确的使用值是768/1024，以防你想知道，如果设备在不使用Javascript的情况下旋转，这将切换样式。所有iPad都具有相同的分辨率？我认为不同版本有3种解决方案。我想不可能预测是否会有更多的解决方案出现。回想当年，当我在做它的时候，没有iPadMini。所以，我不知道它报告的屏幕分辨率是多少。但是，这个CSS媒体查询对iPad有效。因此，最好在实际设备上进行测试，以确保更准确。当您处于横向时，设备宽度不是为1024px吗？不，据我所知，这些尺寸信息对于设备是固定的。对于方向，您已经有了方向选择器。在服务器上检测有一些好处。一旦在服务器上检测到，我会在响应的主体中添加一个类来帮助CSS的选择。这是最好的答案。基于精确的屏幕像素分辨率和方向检测特定的第三方设备不是未来的证明，也不是CSS的目的。服务器端用户代理桥从来都不是一个好的解决方案，因为它是有区别的，所以这个应该是最重要的。@FilipDalüge这远不是最好的答案。只要您使用媒体查询来修复CSS间距问题，无论它是否能经得起未来的考验，或者它是否能在其他屏幕大小完全相同的设备上启动，都无关紧要。上面的答案针对的是一款完全相同版本的Mobile Safari，它基本上是无用的，因为它甚至不能在一代人的时间内处理所有iPad设备。当媒体查询可以完成这项工作时，没有人应该这么做。最肯定的不是最好的答案。谢谢，但当在横向和纵向模式之间切换时，我会觉得很混乱。因此，我必须添加

和（方向：纵向）

和

和（方向：横向）

，这样css就不会发生冲突。因此，对于任何不理解我意思的人来说，整个媒体查询的纵向如下：

@media all和（设备宽度：768px）和（设备高度：1024px）以及（方向：纵向）{//style}

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

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

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

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

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