CODEWITHSUNDEEP
cssipadmedia-queries
frenchie
frenchie

Reputation: 51977

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.

Upvotes: 3

Views: 4765

Answers (7)

Md. Abunaser Khan
Md. Abunaser Khan

Reputation: 209

This Query working on all device I hope your issue is resolve. 

  /*---------------------------------------------------------------------
        Large Desktops
    -----------------------------------------------------------------------*/

    @media only screen and (min-width: 992px) and (max-width: 1200px) {

    }


    /*---------------------------------------------------------------------
        Desktops
    ----------------------------------------------------------------------*/

    @media only screen and (min-width: 768px) and (max-width: 991px) {


    }


    /*---------------------------------------------------------------------
        Tablets Devices
    -----------------------------------------------------------------------*/

    @media only screen and (min-width: 480px) and (max-width: 767px) {



    }


    /*----------------------------------------------------------------------
       Mobile Devices
    ------------------------------------------------------------------------*/

    @media only screen and (min-width: 360px) and (max-width: 479px) {

    }


    /*----------------------------------------------------------------------
        Small Screen Mobile Devices
    -----------------------------------------------------------------------*/

    @media only screen and (min-width: 320px) and (max-width: 359px) {

    }

Upvotes: 0

Kaustavi Banerjee
Kaustavi Banerjee

Reputation: 47

As per my knowledge resolution of iPad Pro is (1024x1366)px and iPad Pro9.7 is (768x1024)px. So if you want to load specific stylesheet for specific resolution, then you might be load the stylesheet of 

<link media="only screen and (min-width: 768px) and (max-width: 1199px)" href="..." rel="stylesheet" type="text/css">

I think this will help you.

Upvotes: 0

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

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

Upvotes: 4

Brickers
Brickers

Reputation: 192

have you included <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>? I find including this makes retina devices behave as expected without any extra fiddling with 2x and 3x devices mentioned by f-spin

edit: just beware, you may find this affects layout that currently works well, but overall should make media queries more predictable once you've got over that (probably quite small) hump

Upvotes: 0

f-spin
f-spin

Reputation: 161

So, if i were you, I will do something like this:

<!-- small devices non-retina (apple use 2x for ipads and 3x for the newest iphones) -->
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">

<!-- small devices retina (apple use 2x and 3x) -->
<link 
  media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
         only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 800px),
         only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 800px),
         only screen and (min-device-pixel-ratio: 2) and (max-width: 800px),
         only screen and (min-resolution: 192dpi) and (max-width: 800px),
         only screen and (min-resolution: 2dppx) and (max-width: 800px)" 
   href="..." rel="stylesheet" type="text/css">

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

<!-- bigger devices higher res -->
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">

If you see in this article of CSS Tricks: Media Queries for Standard Devices you can go very specific trying to point each devices. Or get use of some of this examples (maybe in combination with orientation: portrait)

Lastly I'll like to say that, personally, I only use the -webkit-min-device-pixel-ratio: 2 or -webkit-min-device-pixel-ratio: 3 to point to the high-res raster/bitmap images (jpg and png) I'll use.

I hope this help.

You can find more info about 2x and 3x devices and how this affects images on this article from Apple.

Other resources:

More official sources:

Upvotes: 1

Deepak Kumar
Deepak Kumar

Reputation: 355

This Query working on all device I hope your issue is resolve. 

@media only screen and (max-width:767px){
    .big-dot{
      width:280px; height:280px; margin:0 auto; background:red;
    }

}/*===========Mobile Device=============*/


@media only screen and (min-width:768px) and (max-width:1280px){
    .big-dot{
      width:280px; height:280px; margin:0 auto; background:green;
    }

}/*===========Tab and  IPad Pro Device=============*/



@media only screen and (min-width:1280px) {
    .big-dot{
      width:280px; height:280px; margin:0 auto; background:cyan;
    }

}/*===========Large Desktop  Device=============*/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="big-dot">
    Time Big Dot /.....
</div>
</body>
</html>

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26380

iPad pro has a retina display, with a pixel aspect ratio of probably 2, which makes virtually 2 x 800 = 1600 pixels. That's why the selected media query is the wrong one. You'll have to deal with pixel aspect ratio too. See this : https://css-tricks.com/snippets/css/retina-display-media-query/

Upvotes: 0

Related Questions