媒体查询不适用于 iPhone 和 iPad

@media在以下情况下查询不起作用iPhone 5 和 iPad 4 操作系统。我用过以下CSS用于针对不同屏幕设计每个操作系统和设备。

我明确检查了我的 iPad 和 iPhone 的宽度和高度，并基于此只有我保留了媒体查询。这有效fine在 ANDROID 操作系统上。

/*@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 媒体查询问题）。谁能解释一下在这种情况下像素比很重要吗？

摘自https://mislav.net/2010/04/targeted-css/

您应该注意方向媒体查询虽然在 iPad 上受支持，但在 iPhone 上不起作用（使用 v3.1.3 进行测试）。幸运的是，诸如宽度和设备宽度之类的尺寸查询可以工作，因此无需 JavaScript 即可通过这些查询的某种组合进行布局切换。