What is correct media query for IPad Pro

Question

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   lt meta http-equiv  X-UA-Compatible  content  IE edge    gt   lt meta http-equiv  content-type  content  text html  charset utf-8    gt   lt meta name  viewport  content  width device-width  initial-scale 1  maximum-scale 1  user-scalable no    gt

User · Answer

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    
}

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[css] What is correct media query for IPad Pro?

Examples related to css

Examples related to ipad

Examples related to media-queries