您好，我与多个平板设备，iPad，Galaxy Tab，宏碁Iconia，LG 3D Pad等工作。
> iPad – 1024 x 768
> LG Pad – 1280 x 768
> Galaxy Tab – 1280 x 800
我想定位iPad只使用CSS3媒体查询。由于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的样式，任何想法？
解决方法
终于找到了解决方案from：
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: 768px) and (device-height: 1024px) and (orientation:landscape) {
.ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
希望这可以帮助。
其他参考：
