min-width media query not working on ipad?

Question

Why isnt the following media query being picked up on iPads in landscape mode?

@media all and (min-device-width: 1000px) {
    css here
}

Or

Answer 1

From http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .selector-01 { margin: 10px; }
    .selector-02 { margin: 10px; }
    .selector-03 { margin: 10px; }
}

It looks like the screen attribute may be required.

Answer 2

Trying to write a media query for tablet, I actually encountered the problem of the iPad underreporting its dimensions. When I tried to use @media screen and ( min-width: 768px ), my styles were being applied to other tablet devices, but ignored by the iPad. I started playing around with the Responsive device model in developer tools, and I stumbled onto the solution. For some reason, my styles would apply when I sized the screen down to 760px. So, I edited the media query to read @media screen and ( min-width: 760px ) and everything started working as expected.

Answer 3

For the record, I'm not sure why

@media (min-width: 1000px) {

 /* css here */

}  

didn't work for you. Possibly something changed with the iPad since this question was first posted?

Here's a working example:
live view: http://fiddle.jshell.net/panchroma/Bn4ah/show/
edit view: http://fiddle.jshell.net/panchroma/Bn4ah/

Also be sure to include

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

in the head of your page.

Answer 4

If found this works great for the new iPad

@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
    * {
        color:white;
        background-color:red;
    }
}

Answer 5

I was trying to use a simple media query like this: @media only screen and (min-width : 768px) {css here} but I wouldn't trigger on an iPad pro 10.5' I was testing on, I increase it to 900px (for portrait) and it worked just fine, I think because of the retina display you need to compensate, it may work fine on old iPads non-retina.

Answer 6

The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation and use min-device-height:1000px like so:

     /* This will apply to all screens with a width 999px and smaller */
* {
     color:green;
     background-color:black;
}

     /*
       This will apply to all screens larger then 1000px wide 
       including landscape ipad but not portrait ipad. 
      */
@media (orientation:landscape) and (min-device-height:1000px),
       all and (min-width:1000px) {
    * {
        color:white;
        background-color:red;
    }
}

Results:

• iPad
  • Portrait       - green text - black background
  • Landscape - white text  - red background
• iPhone
  • Portrait       - green text - black background
  • Landscape - green text - black background
• Computer (resolution)
  • 1680x1050 - white text  - red background
  • 800x600     - green text - black background

Using chrome & firefox (does anyone even use IE anymore?)

References:
w3 media queries
Safari CSS Reference
Optimizing Web Content