iPad Media Queries

A problem with Safari on the iPad is that it always reports the width as 768 pixels and the height as 1024 pixels, even if the tablet is rotated into landscape orientation. This seems different from most other devices, which show a greater width than height when viewed in landscape orientation.

I like to know if and iPad (or other tablet) is being used in landscape orientatation because 1024 pixels is typically enough to render the desktop version of a web site. So I like to make the widest media query apply to the iPad when it is in landscape. But the media query will always report a width of 768 pixels, which makes this difficult to detect.

My solution is to use the following media query:

/* ---------------------------------------------------------------------------- */
/* the part after the comma applies only to iPad in landscape orientation       */
/* the comma means "or"                                                         */
/* ---------------------------------------------------------------------------- */

@media screen and (min-width: 769px) ,
screen and (device-height: 1024px) and (device-width: 768px) and (orientation:landscape) {
...
}

There are several interesting things about this media query.

The comma means “or” just like commas do in other CSS selectors. This means the following set of selectors will apply to any window that has a min width of 769 pixels, and it will also apply to the second more complicated device type.
No device should report a device height greater than its device with while still in landscape orientation. The fact that the iPad does this means that this second media query should apply only to iPad devices.
The second media query specifies device-height and device-width, not just max-width, min-width, or window width. So we don't have to worry that the window may be slightly smaller than the device. The iPad has a screen size of 768x1024 pixels.
The iPad Air and iPad Mini also report a screen size of 768x1024, even though the iPad Mini is smaller physically, and the iPad Air actually has 1536x2048 screen pixels.
Other tablets should respond appropriately to this media query because the first query matches any device that has a width of 769 pixels or more.