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

Question

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

此外，iPad 1和iPad 2在两个方向上的设备宽度均为768px。在iPad 3上也是这样吗？

Answer 1

新iPad将same device-width报告为第一个和第二个iPad（768）。

Answer 2

我相信是。

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

<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

Answer 3

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

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