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

Question

嗨,我正在使用多个平板设备,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的设备宽度相同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 */

我不知道-webkit-device-pixel-ratio和其他-webkit*选项及其为iPad定位的值.我不想将JavaScript用于样式,任何想法？

Answer 1

最后找到了一个解决方案:使用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

Answer 2

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

Answer 3

我回答这个问题有点晚了,但上述都没有对我有用.

这对我有用

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