媒体查询不适用于iPhone和iPad

Question

@media查询不起作用的情况下iPhone 5和iPad 4操作系统。我已使用以下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; 
    } 
} 

每次我在上面的代码中对各种变化进行测试时，我都会引用LAST CSS来应用样式。

我发现一个链接，（我还没有尝试过，但马上就要尝试mac了），但也有问题（iphone/ipad media query issues）。任何人都可以解释背后的原因，在这种情况下，像素比是否重要？

Answer 1

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

你应该知道，向媒体查询摘录，虽然支持在iPad，iPhone上（与v3.1.3测试）不起作用。幸运的是，尺寸查询，如宽度和设备宽度的工作，所以没有JavaScript和这些组合的布局切换是可能的。

Answer 2

原因是因为新的Apple设备具有更高的像素比密度。你应该把这个元标记在文档的头部和媒体查询将工作无处不在：

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

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

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

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

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