Question

我一直在使用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文件的不同部分尝试了这段代码，但仍然没有运气。

Answer 1

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

Answer 2

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

总而言之，对于在编写新iPad Retina显示屏（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// }

iPad Retina显示特定的媒体查询

2 个答案: