媒体查询不适用于iPhone和iPad

在iPhone 5和iPad 4 OS的情况下@media查询不起作用。 我已经使用下面的CSS为每个操作系统和设备造型为不同的屏幕。

我明确地检查了我的iPad和iPhone的宽度和高度，并基于这一点，我只保留了媒体查询。 这在ANDROID OS上工作正常 。

/*@media print {*/ /* iPhone 5 (Portrait) */ @media screen and (max-device-height: 568px) and (orientation: portrait) { #map_canvas { border: 1px dashed #C0C0C0; width: 290px; height: 473px; } } /* iPad 4 (Portrait) */ @media screen and (max-device-height: 1024px) and (orientation: portrait) { #map_canvas { border: 1px dashed #C0C0C0; width: 735px; height: 929px; } } /* iPad 4 (Landscape) */ @media screen and (max-device-width: 1024px) and (orientation: landscape) { #map_canvas { border: 1px dashed #C0C0C0; width: 990px; height: 673px; } } /* Samsung 10.1 inch (Portrait) */ @media screen and (max-device-height: 1280px) and (orientation: portrait) { #map_canvas { border: 1px dashed #C0C0C0; width: 790px; height: 1140px; } } /* Samsung 10.1 inch (Landscape) */ @media screen and (max-device-width: 1280px) and (orientation: landscape) { #map_canvas { border: 1px dashed #C0C0C0; width: 1230px; height: 680px; } } /* Samsung 7.0 inch (Portrait) */ @media screen and (max-device-height: 1024px) and (orientation: portrait) { #map_canvas { border: 1px dashed #C0C0C0; width: 570px; height: 875px; } } /* Samsung 7.0 inch (Landscape) */ @media screen and (max-device-width: 1024px) and (orientation: landscape) { #map_canvas { border: 1px dashed #C0C0C0; width: 990px; height: 455px; } } @media all and (orientation: landscape) { html, body { height: auto; } } 

每次我在上面的代码中进行了各种更改testing，我得到的最后的CSS被引用应用风格。

我发现一个链接，（我还没有尝试，但即将尽快mac可用），但也有关于这个问题（ iPhone / iPad的媒体查询问题 ）。 任何人都可以解释这背后的原因在这种情况下，像素比率事宜？

Answer 1

摘自http://mislav.uniqpath.com/2010/04/targeted-css/

您应该意识到，定向媒体查询（尽pipe在iPad上支持）不适用于iPhone（已在v3.1.3中testing过）。 幸运的是，尺寸查询，如宽度和设备宽度的工作，所以没有JavaScript的布局切换是可能的一些组合。

Answer 2

原因是因为新的苹果设备具有更高的像素比密度。 您应该将这个元标记放在文档的头部，并且您的媒体查询可以在任何地方使用。

 <meta name="viewport" content="width=device-width"> 

顺便说一句，新的苹果产品的像素比例越高，被称为“视网膜显示”。

如果你有访问iPhone，iPad等，请尝试查看此网站：

http://mattstow.com/viewport-size.html

在这些设备上查看设备的视口大小 。 然后， 添加元标记 ，您将看到视口大小更改 。