min-width media query not working on ipad?

问题:

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

回答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

回答2:

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.

回答3:

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;
    }
}

回答4:

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.

回答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.