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

你好，我的工作与多个平板电脑设备，iPad，Galaxy Tab，宏基 Iconia，LG 3D 平板电脑等。

  • IPad-1024 x 768
  • LG Pad-1280x768
  • Galaxy Tab-1280x800

我想只使用 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 设备像素比和其他 webkit * 的选项，也不知道它们对 iPad 的价值。我不想在样式中使用 JavaScript，有什么想法吗？

224477 次浏览
小开

同样的问题，也有一个答案

Http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...

我现在不能测试它，所以请测试它

还发现了更多:

Http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

或者用一些 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
小开
最佳答案

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

希望这个能帮上忙。

其他参考文献:

小开 
<html>
<head>
<title>orientation and device detection in css3</title>


<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.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" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />


</head>
<body>
<div id="iphonelandscape">iphone landscape</div>
<div id="iphoneportrait">iphone portrait</div>
<div id="ipadlandscape">ipad landscape</div>
<div id="ipadportrait">ipad portrait</div>
<div id="htcdesirelandscape">htc desire landscape</div>
<div id="htcdesireportrait">htc desire portrait</div>
<div id="desktop">desktop</div>
<script type="text/javascript">
function res() { document.write(screen.width + ', ' + screen.height); }
res();
</script>
</body>
</html>
小开

我现在回答这个问题有点晚了，但是以上这些问题对我都不起作用。

我就是这么做的

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

现在你可以使用 媒体查询第4级功能来检查设备是否具有 在元素上空盘旋功能。

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

由于 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.
小开

这是 iPad 的

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

}

这是 ipad pro 的

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

}

提交答案