iPad Retina 显示特定媒体查询答案

【问题标题】：iPad Retina Display specific media queriesiPad Retina 显示特定媒体查询
【发布时间】：2014-02-19 19:08:10
【问题描述】：

我一直在使用 Apple 的 Xcode 工具（iOS 模拟器）对 iPad 视图进行编码。我无法在 iPad Retina 设备上定位横向视图。我一直在尝试以下媒体查询...

@media only screen and (min-device-width : 768px) and (max-device-width 
: 1024px) and   (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){  //style goes here// }

@media only screen and (min-device-width : 1536px) and (max-device-width 
: 2048px) and   (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){  //style goes here// }

我找不到任何其他方法来定位 iPad Retina 中的横向视图。我什至在 CSS 文件的不同部分尝试过这段代码，但仍然没有运气。

【问题讨论】：

标签： ios css wordpress ipad media-queries

【解决方案1】：

第一个是正确的，我使用相同的媒体查询并且在真实设备上工作。也许您忘记包含元视口？

【讨论】：

+1，这是媒体查询问题的最常见原因。
也许，我应该如何包含它？ @Usse我在我的CSS文件上使用了几个媒体查询，它们都工作正常。我已经编写了 iphone 两个视图。
响应式布局的常见元视口是：如果你可以在真机上测试你可以检查是否是模拟器相关的问题。
我正在使用 wordpress 进行开发。所以你告诉我应该在我的 header.php 文件中包含以下行：<meta name="viewport" content="width=device-width, user-scalable=no"> 就像这样，以便识别媒体查询？ @Usse
您需要视口元标记才能正确触发媒体查询（检查developer.mozilla.org/en-US/docs/Mozilla/Mobile/…）

【解决方案2】：

当我进入 Wordpress 仪表板中的编辑器（查询不存在）时，我刚刚意识到我的 FTP 程序无法正常工作，所以我直接在主题的 CSS 文件上手动编写了黎明它起作用了。这个 FTP 程序从我这里偷走了几个小时.. 但是the query was right and the meta tag as well.

总而言之，对于在编写新 iPad 视网膜显示屏（32 位和 64 位）时遇到问题的任何人，他们应该在标题中包含 元视口：

 <meta name="viewport" content="width=device-width, user-scalable=no">

对应的查询（本例中为横向视图）为：

@media only screen and (min-device-width : 768px) and (max-device-width 
: 1024px) and   (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){  //style goes here// }

【讨论】：