2

@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;
  }
}

每次我在上面的代码中进行各种更改测试时，我都会得到 LAST CSS 被引用以应用样式。

我找到了一个链接，（我还没有尝试过，但会在 mac 可用时立即尝试）但对此也有疑问（iphone/ipad 媒体查询问题）。谁能解释在这种情况下像素比很重要的原因？

4

2 回答 2

4

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

您应该知道，方向媒体查询虽然在 iPad 上受支持，但在 iPhone 上不起作用（使用 v3.1.3 测试）。幸运的是，像 width 和 device-width 这样的尺寸查询可以工作，所以布局切换可以在没有 JavaScript 的情况下通过它们的某种组合来实现。

于 2013-02-11T18:21:20.377 回答
3

原因是新的苹果设备具有更高的像素比密度。您应该将此元标记放在文档的头部，您的媒体查询将在任何地方工作：

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

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

如果您确实可以访问 iPhone、ipad 等...尝试查看此网站：

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

在这些设备上查看设备的视口大小。然后，添加元标记，您会看到视口大小发生了变化。

于 2013-02-11T18:20:36.413 回答