时间戳

首页 > 解决方案 > 您如何针对新的 11 英寸 iPad Pro 进行媒体查询？

css - 您如何针对新的 11 英寸 iPad Pro 进行媒体查询？

问题描述

我在用

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {}

以 iPad Pro 12.9 英寸为目标

和

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px)
and (-webkit-min-device-pixel-ratio: 2) {}

以所有其他 ipad 为目标。

在这种情况下，新的 11 英寸 iPad Pro 使用与“旧”ipad 相同的媒体查询，即使它具有更高的分辨率。我需要以不同的方式定位它。

如果有帮助，它具有：2388 x 1668 像素分辨率，每英寸 264 像素 (ppi)

谢谢

标签： cssipadmedia-queries

解决方案

以下 CSS 在 Chrome 模拟器中有效，但最好在实际的 iPad Pro 上进行测试。

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

您还可以将 1024px 的值更改为 2388px 并进行测试。

推荐阅读