iPad 3（或新 iPad）上的 CSS 媒体查询

Posted 2023-03-06

【中文标题】iPad 3（或新 iPad）上的 CSS 媒体查询

【英文标题】：CSS Media Queries on iPad 3 (or the new iPad)

【发布时间】：2012-04-09 09:09:47

【问题描述】：

应用 CSS 媒体查询来检测 iPad 3 或新 iPad 会有什么不同吗？

iPad 1 和 iPad 2 在两个方向上都返回了 768px 的设备宽度。那么在 iPad 3 上也一样吗？

【问题讨论】：

我们在这个话题中找到了答案：***.com/questions/9780189/retina-ipad-specific-css/…

是的，即使下面的答案也很有帮助..

【参考方案1】：

新 iPad 将same device-width 报告为第一台和第二台 iPad (768)。

【参考方案2】：

我相信是的。

如果您担心新 Retina 显示屏的像素分辨率进一步提高会带来影响，请在页面的 head 元素中添加以下内容：

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

请参阅这篇文章，了解有关检测视口尺寸的非常有用的信息：

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-javascript-CSS-and-Meta-Tags.htm

【参考方案3】：

新 iPad（或 iPad 3）的媒体查询几乎保持不变。 因此，如果您检查 min-device-width 为 768px，它仍然适用于新 iPad。但是，为了提供更具体的查询，您可以检查 1536 像素和 2048 像素之间的设备宽度。

有一个非常好的使用 CSS 媒体查询的教程，位于 http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8