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

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

I want this css to target any browser which is 1000px wide or over, not just ipads. For this reason id rather work with the 2nd option of min-width not min-device-width if possible. Both versions work fine with firefox on my PC. Thanks

Answer 1

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