What is correct media query for IPad Pro?
Asked Answered
O

9

45

I have these two but they are not working. I'm simulating 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 remove 'and (orientation: landscape)' then the css in there works in the first media query. What is the correct orientation, for both landscape and portrait ?

The HTML meta is set 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" />
Overcrop answered 1/2, 2017 at 11:19 Comment(4)
Your question is not clear. Please be specific with what you want to achieve.Williamwilliams
Seems clear to me: Both Portrait and Landscape CSS are not being invoked on IPad Pro. And if I remove the orientation they workOvercrop
I was facing a similar problem. This one really helped me out.Mesognathous
Thanks, I've been given a mass of CSS (I'm not a UI graphics guy). I'll try and convert the .scss from your link. There seems to be a general problem with orientation in CSS. I've got problems with Galaxy Tabs not picking up the orientation as well.Overcrop
B
67
/* ----------- 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 this works for me in the Chrome simulator.

Billingsley answered 31/3, 2017 at 16:27 Comment(2)
Be careful to also test Mobile Safari running in split screen (which usually causes problems if trying to detect devices!).Gigantopithecus
This will also target 4k screens like my HP Envy and Firefox which is not an iPad Pro.Driscoll
F
32
/* 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)  {}

Portrait medias query for iPad Pro should be fine as it is.

Landscape media query for iPad Pro (min-device-width) should be 1366px and (max device-height) should be 1024px.

Hope this helps.

Foresail answered 27/2, 2017 at 16:51 Comment(4)
when i try this on the google chrome simulator for "ipad pro" this dosn't work for meFrannie
if you remove the "only" and use "min-width" instead of "min-device-width" isn't work in chrome?Rillings
Wow. This is the only media query I think I've seen that I can say works perfectly! Thank you.Smolt
Only needs correct the first to - and (min-device-width: 1024px) and (max-device-height: 1366px) - and works very well.Tressatressia
O
6

Note that there are multiple iPad Pros, each with a different Viewports: When emulating an iPad Pro via the Chrome developer tools, the iPad Pro (12.9") is the default option. If you want to emulate one of the other iPad Pros (10.5" or 9.7") with a different viewport, you'll need to add a custom emulated device with the correct specs.

You can search devices, viewports, and their respective CSS media queries at: http://vizdevices.yesviz.com/devices.php.

For instance, the iPad Pro (12.9") would have the following media queries:

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

Whereas the iPad Pro (10.5") will have:

/* 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... */ }
Orfurd answered 29/10, 2018 at 19:3 Comment(0)
D
6

I can't guarantee that this will work for every new iPad Pro which will be released but this works pretty well as of 2019:

@media only screen and (min-width: 1024px) and (max-height: 1366px)
    and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    /* ... */
}
Driscoll answered 23/10, 2019 at 12:19 Comment(0)
A
5

This worked for me

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

}
Actinology answered 3/3, 2018 at 18:56 Comment(0)
Z
4

I tried several of the proposed answers but the problem is that the media queries conflicted with other queries and instead of displaying the mobile CSS on the iPad Pro, it was displaying the desktop CSS. So instead of using max and min for dimensions, I used the EXACT VALUES and it works because on the iPad pro you can't resize the browser.

Note that I added a query for mobile CSS that I use for devices with less than 900px width; feel free to remove it if needed.

This is the query, it combines both landscape and portrait, it works for the 12.9" and if you need to target the 10.5" you can simply add the queries for these dimensions:

@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    
}
Zaffer answered 17/1, 2019 at 10:34 Comment(1)
This worked best for me when you have some overlapping queries,Estrous
C
4

Too late but may this save you from headache! All of these is because we have to detect the target browser is a mobile!

Is this a mobile then combine it with min/max-(width/height)'s

So Just this seems works:

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

If the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none! There are many cases that you can read from bellow links.

Described as well Also for browser Support See this from MDN

Combined answered 13/8, 2019 at 14:9 Comment(0)
D
0

For those who want to target an iPad Pro 11" the device-width is 834px, device-height is 1194px and the device-pixel-ratio is 2. Source: screen.width, screen.height and devicePixelRatio reported by Safari on iOS Simulator.

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

Deaf answered 10/3, 2019 at 16:58 Comment(0)
U
0

iPad Pro 12th Gen - 2022, I have tried, and it worked.

Portrait:

@media only screen and (width: 1024px) and (height: 1292px) {}

Landscape:

@media only screen and (width: 1366px) and (height: 950px) {}
Unbecoming answered 8/2, 2023 at 9:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.