iPad pro 11 (2018) 精确的 css 媒体查询

Question

我为 11" iPad pro 设置了 CSS 媒体查询，但在 iPad 上无法读取。

我当前的媒体查询是

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

}

我一直在为 12.9" 工作 css

@media only screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
}

我还检查了横向上 11" 的宽度是 1194px，有人知道仅适用于 ipad pro 11" 的正确 css 媒体查询吗？

Answer 1

Apple iPad Pro 11 (2018) 仅涵盖纵向到横向宽度的媒体查询。

@media only screen and (min-width: 834px) and (max-width: 1194px)  { /* Your Styles... */ }

Apple iPad Pro 11 (2018) 媒体查询（仅针对平板电脑）

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

Apple iPad Pro 11 (2018) 最小宽度媒体查询

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

Apple iPad Pro 11 (2018) 最小高度媒体查询

@media only screen and (min-height: 1194px) { /* Your Styles... */ }

Apple iPad Pro 11 (2018) 横向媒体查询

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

Apple iPad Pro 11 (2018) 纵向媒体查询

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

Apple iPad Pro 11 (2018) 视网膜媒体查询

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 264dpi),
  only screen and (                min-resolution: 2dppx) { 
    /* Retina styles here */
}

Retina 2x 媒体查询

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    /* Retina styles here */
}

Retina 3x 媒体查询

@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 384dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}