iPad Pro media queries

Design help General
1

Hey,

I am having issues getting the iPad pro (landscape) to work using custom code. To make it super simple, I have created 3 divs (desktop, tablet-portrait- tablet-landscape) and entered the following code. The issue is that this is now working when tested on chrome developer tools but when viewed on an iPad pro 12.9", the desktop div is being displayed when viewed in landscape. Any ideas on why this isn’t working? Thanks

@media only screen

and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

.desktop {display:none;}
.tablet-portrait{display:block;}
.tablet-landscape{display:none;}

}

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

.desktop {display:none;}
.tablet-portrait{display:none;}
.tablet-landscape{display:block;}

}

Here is my site Read-Only: https://preview.webflow.com/preview/media-queries?utm_medium=preview_link&utm_source=designer&utm_content=media-queries&preview=0f55c8f0ae13c2722ad561e89495108f&mode=preview
(how to share your site Read-Only link)

2

Hey @Alistair_Gallop any luck with this in the end? Trying same thing.

Cheers

3

Hi Luke, no I have never got the media queries to work for the new iPad Pro, tried everything. It’s strange as it works within the google chrome developer tool simulation of the iPad pro but not on the real thing. Portrait works, but landscape doesn’t.

Let me know if you make any progress!