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

}

我一直在 css 为 12.9" 工作

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

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

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) Retina 媒体查询

@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 */
}

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

iPad pro 11 (2018) exact css media query

css

ipad

media-queries