Why isnt the following media query being picked up on iPads in landscape mode?
@media all and (min-device-width: 1000px) {
css here
}
Or>
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:
Using chrome & firefox (does anyone even use IE anymore?)
References:
w3 media queries
Safari CSS Reference
Optimizing Web Content