I'm editing other people's CSS. They've used two media queries for iPad (one for portrait, one for landscape) that seem to be causing problems on some larger Android phones and phablets.
What I find so strang is that the CSS they have used is being recommended by just about everyone, even though it is highly vulnerable on Android devices.
What this query does is: It uses a combination of min-device-width and max-device-width to ascertain that the device is an iPad. It uses the 'orientation' parameter to figure out if the device is portrait or landscape (on iOS devices, the device-width is always the width in portrait mode, even if the device is currently in landscape).
This is the CSS that seemed to be causing the problem:
/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}
/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}
Now the problem is that defining a minimum and maximum device width leaves a lot of room for these styles to be applied to other devices as well. Anything with a width between 768px and 1024px is being treated as an iPad.
In my case, the style specifies that a custom button bar at the bottom of the screen be exactly 768 pixels wide. And some more stuff like that. That works on iPads but not on devices with similar but different widths. Buttons are falling off the screen on the Android devices involved.
So what I am using now is:
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { etc }
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { etc }
This seems to target exactly all iPads. I've understood that all iPads have a "device-width" of 768 pixels even if their resolution is higher.
So I'm pretty sure I'm doing it right. But since this is pretty common issue and everyone else is saying to use MIN-device-width and MIN-device-height, I'd still be really happy to hear someone else on this.
