正确的IPad Pro媒体查询

Question

我有这两个,但他们没有工作.我在Chrome中进行模拟

/* Landscape*/

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

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

如果我删除'和(方向:横向)'那么那里的css在第一个媒体查询中工作.景观和肖像的正确方向是什么？

HTML元设置为

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

Answer 1

/* ----------- 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) {

}

我没有iPad Pro,但这适用于Chrome模拟器.

Answer 2

/* Landscape*/

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

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

iPad Pro的Portrait medias查询应该没问题.

iPad Pro(最小设备宽度)的横向媒体查询应为1366px,(最大设备宽度)应为1024px.

希望这可以帮助.

Answer 3

我不能保证这适用于将要发布的每款新 iPad Pro，但这在 2019 年效果很好：

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

Answer 4

这对我有用

/* Portrait */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-width: 1112px) 
  and (max-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2)
 {

}

Answer 5

请注意，有多个 iPad Pro，每个都有不同的视口：当通过 Chrome 开发人员工具模拟 iPad Pro 时，iPad Pro (12.9") 是默认选项。如果您想模拟其他 iPad Pro (10.5 “或 9.7”）具有不同的视口，您需要添加具有正确规格的自定义模拟设备。

您可以在以下位置搜索设备、视口及其各自的 CSS 媒体查询：http : //vizdevices.yesviz.com/devices.php。

例如，iPad Pro (12.9")将有以下媒体查询：

/* Landscape */ 
@media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }

而iPad Pro (10.5")将具有：

/* Landscape */ 
@media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }