Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Media query not working as expected on iPad Pro

I've got my visitor portal setup for 3 types of devices: mobile (less than 800px width), low-res desktop and hi-res desktop, like this:

<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">   
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." type="text/css">   
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">

All this works rather well but with the iPad Pro portrait, the width of the screen is less than 800px but the stylesheet that's selected is the low-res desktop. What do I need to change to make it work?

Edit (to clarify the problem)

When I do something like this

<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
<link media ="only screen and (max-width: 800px),
only screen and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:portrait),
only screen and (max-device-height:1366px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:landscape)"
href="..." rel ="stylesheet" type="text/css">

The problem is that the styles get mixed-up at different resolutions. I'm looking to make it work so that only one stylesheet is active at anytime.

like image 233
frenchie Avatar asked Jan 19 '26 03:01

frenchie


1 Answers

iPad Media Queries

iPad Media Queries (All generations - including iPad mini)

iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

To know more about device media queries, please visit Stephen.io/mediaqueries Source credits to http://stephen.io/mediaqueries/

Hope this may help you.

Thank you

like image 116
Satheesh Kumar Avatar answered Jan 21 '26 21:01

Satheesh Kumar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!