The right media query for iPad Pro

Question

I have these two, but they do not work. I mimic in 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)  {}

If I delete 'and (orientation: landscape)', then css works there in the first media request. What is the correct orientation for both the landscape and the portrait?

HTML metatet is specified as

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

}

I don't have an iPad Pro, but it works for me in a Chrome simulator.

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

The portrait media request for the iPad Pro should be fine.

The landscape orientation media request for iPad Pro (min-device-width) should be 1366px and (max-height-device) should be 1024px .

Hope this helps.

Answer 3

/* 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 4

, iPad Pro, : iPad Pro Chrome 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... */ }

Answer 5

, ! , , !

, /max- (/)

, , :

@media (hover: none) {
    /* ... */
}

, (, ), , ! , .

. MDN

Answer 6

, , - , CSS iPad Pro, CSS . max min EXACT VALUES, , iPad pro .

, CSS, 900 ; .

, , , 12.9 ", 10.5", :

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

     // insert mobile and iPad Pro 12.9" CSS here    
}

Answer 7

For those who want to use the iPad Pro 11 " device-widthis 834 pixel device-height- 1194 device-pixel-ratio- 2 Source: screen.width, screen.heightand devicePixelRatiowhich informs Safari in iOS Simulator,

Exact media query for the portrait: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)