CSS Media Queries for iPad Pro
I know what you’re thinking. Why does this need a blog post? Can’t I simply use ‘min-width’ and ‘max-width’ media queries to isolate out the iPad Pro for custom styling? The answer is maybe.
For a lot of responsive websites, you can rely on the browser’s width to make a website respond intuitively based on the device’s browser dimensions. When you want to have custom expectations based on the device type, however, it becomes more nuanced.
The best example of this is the iPad Pro. The iPad Pro has browser dimensions (1366/1024) that are very similar to common desktop dimensions (1280/800), which can make the management of CSS breakpoints tricky as there will be overlapping breakpoint widths.
To be more specific, if I use the min-width media query (min-width: 1365px) to set custom mobile styling (ex: buttons, no hover states) for the iPad Pro, that styling would be applied to any desktop browser of the same width.
As you can see in the pictures above, both examples have the same browser width, but different UI expectations, which is the dilemma. When researching how to solve this, I went down a number of rabbit holes.
Since all iPads have a pixel ratio value of 2, my first attempt to isolate the iPad in CSS was to use the device-pixel-ratio resolution query. Unfortunately, Macbook Retina computers do as well so that solution didn’t pan out.
Next I used JavaScript to append a class on the root body tag (ex: <body class=”ipad”>) using simple user agent detection. While this did work in theory, in practice it made the CSS a mess. Since the custom class was at the top of the DOM hierarchy, the only way to utilize it was to duplicate all the CSS and nest it under the custom class to make the custom changes there. It worked, but it didn’t feel right and I knew it would be unmanageable in the long-term.
After I went down a number of other rabbit holes (ex: landscape/portrait orientation media queries), I arrived at a straightforward solution: min/max device widths. The height/width of an iPad Pro in both portrait and landscape modes will always be static (1366/1024, 1024/1366 respectively). That means you can use browser width CSS media queries in combination with min/max device width queries (to exclude desktop browsers). You end up with the following:
Know of a better way? Feel free to comment below or email me directly at: dan@thredup.com
