媒体查询不工作的iPhone和iPad(Media Query not working for iP

@media查询是不是在iPhone 5和iPad 4 OS的情况下工作。 我用下面的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;
  }
}

每个我在上面的代码中的各种变化进行测试的时候，我得到最后的CSS被提及的应用样式。

我找到了一个链接，（我还没有尝试过，但很快就要尝试为Mac是可用的），但有关于这个问题太（ iPhone / iPad的媒体查询的问题 ）。 谁能解释背后是像素比例的事项在这种情况下的原因？

Answer 1:

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

你应该知道，向媒体查询，但支持在iPad上，并没有对iPhone（带v3.1.3测试）工作。 幸运的是，像宽度和设备宽度的工作，所以布局切换大小查询可能没有JavaScript与这些的一些组合。

Answer 2:

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

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

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

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

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

这些设备上看到该装置的视口大小 。 然后， 添加meta标签 ，你会看到， 视口大小的变化 。

文章来源: Media Query not working for iPhone and iPad