Search code examples
cssipadmedia-queries

iPad pro 11 (2018) exact css media query

I've set an css media query for 11" iPad pro, but it's not read on iPad.

my current media query is 

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

}

I've working css for the 12.9" like that

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

I've also check the width for 11" is 1194px on landscape, anyone know the right css media query for only ipad pro 11"?

Solution

  • Apple iPad Pro 11 (2018) Only Media Query which covers portrait to landscape width. 

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

    Apple iPad Pro 11 (2018) Media Queries (In terms of Tablets only)

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

    Apple iPad Pro 11 (2018) Min-Width Media Queries

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

    Apple iPad Pro 11 (2018) Min-Height Media Queries

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

    Apple iPad Pro 11 (2018) Landscape Media Queries

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

    Apple iPad Pro 11 (2018) Portrait Media Queries

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

    Apple iPad Pro 11 (2018) Retina Media Queries

    @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 Query

    @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 Query

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