CSS媒体查询仅针对iPad和iPad

发布于03月01日

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

iPad-1024 x 768
LG Pad-1280 x 768
Galaxy选项卡-1280 x 800

我想只针对iPad使用CSS3媒体查询.由于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-device-Pixel-Ratio和其他-webkit*选项以及它们的价值.我不想用JavaScript做样式，你有什么 idea 吗？

推荐答案

最终从: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 */
}

希望这能帮上忙.

其他参考文献: