Facebook Twitter Pinterest

Think Mobile

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.