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

小编典典

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

css

嗨，我正在使用多个平板电脑设备，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用于样式，有什么想法吗？

阅读 646

2020-05-16

共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 */
}

希望这可以帮助。

2020-05-16