iPad Mini detection for HTML5

I have bad news for you: it seems impossible.

Two days ago, I’ve tweeted about the first detected problem: “It is confirmed that the iPad Mini User Agent is the same as the iPad 2“. I’ve received literally hundreds of answers saying that user agent sniffing is a bad practice, that we should detect features not devices, etc, etc.

Well yes guys, you are right, but it has no direct relationship with the problem. And I need to add the second bad news: there is no client-side technique to make  “feature detection” neither.

Why do we need to detect the iPad mini in first place #

The iPad Mini has no Retina display -the name that Apple gives to high resolution devices- and it’s an iPad 2 clone in terms of resolution: 768×1024 pixels. The biggest difference is that while iPad 2 is 9,7″; the iPad mini is 7,9″.

While it’s true that the difference between iPad 2 and iPad mini (1.8″ or 4.57cm diagonally) is not so big compared to other series (Nexus 7 and Nexus 10 difference is 3″), we need to understand that everything looks 19% smaller on the iPad mini, including text and touch areas. (Update: real demo of this difference)

Ok, you are right; we don’t really need to care about iPad mini vs. iPad 2 in terms of the device itself, but we do need to care about the dpi difference. Designers should want to make some things larger so they can be read properly, or to make touchable areas larger to avoid usability problems.

Second reason is analytics: some companies want to store information about user’s devices to make some decisions and in this case tablet size and factor, or device release date may be something useful. I know this is not a big problem, but it still sounds like an issue for some website and app owners.

How to detect a feature or a device #

There are several mechanisms to make feature and device detection and it’s a long story. I have a full chapter on this topic in the second edition of my book Programming the Mobile Web (available today as a prerelease draft version).

We should always prefer feature detection against device detection; but on some specific situations device detection is the only way to go.

When talking about server-side detection, the User Agent and/or device libraries, such as ScientiaMobile’s WURFL is the way to go. The User Agent thing is a mess and there is no simple rule to follow and, when a company like Apple decides to user the same User Agent for all devices, there is no server-side only solution that can help us. In this particular case, all the iPads out there, from the first to fourth generation and the iPad Mini uses the same User Agent. The only difference is the iOS version that they have.

I know many of you are thinking: I don’t care about server-side detection, a good practice following RWD – Responsive Web Design- principles is to use media queries or at least JavaScript to detect features. Well, the big bad news appears: there is no way to detect iPad mini unique features (dpi, screen size in inches/cm). Let’s see why.

Using resolution media queries #

CSS3 Media queries includes a resolution attribute that we can query on. The iPad Mini has a 163 dpi resolution screen while iPad 2 has 132 dpi. Great! We have the solution… well, the resolution attribute is not available con WebKit-based browsers, such as Safari on iOS. No way to use it.

Using device pixel ratio #

After that, we think on a non-standard media query extension: the device pixel ratio. High-resolution iPads expose a 2 value from both media queries and JavaScript for the device pixel ratio. Well, iPad Mini and also iPad 2 both expose a value of 1; so we can’t rely on this property neither.

Using inches or centimeters units #

The other solution about dimensions in in (inches) or cm (centimeters). Well, trying to draw a 10 inches element on the screen, such as in width: 10in; I’ve got same results on both devices (that is, on the iPad mini the div is 19% smaller).

UPDATE: In the CSS3 spec, inches or centimeters units might not match the physical size if the anchor unit is the pixel. Therefore they are useless on these devices.

Both iPad 2 and iPad mini exposes same device-width and device-height in inches and centimeters (it’s matching the pixel values) while we know that is completely false. The following media query is true for all the iPads:

only screen and (min-device-width: 8in)

And the iPad Mini has a device width smaller than 5.3 inches, so the query should be false in a first quick thought.

And with font size and font adjustment, the results are also exactly the same. There is no special text adjustment for the iPad mini and it’s using the same values.

If you want to try the media queries values yourself visit mediaqueriestest.com or m.ad.ag from your mobile device.

Apple… why? #

I know some of you will find some obscure reasons, but the official reason is to reduce iOS fragmentation. From a developer and designer perspective we have only two devices: iPhones (including iPod touch) and iPads. That’s all you need to know from an Apple perspective to design and develop a website or an app. While is not a bad idea in a first thought, the iPad mini has a different screen size and that should be honor by the media queries at least.

To make a final conclusion, the problem is not that we can’t detect iPad mini; the problem is that we can’t detect its unique features, such as density and real dimensions that are important for delivering the best possible experience one ach device using responsive web design techniques.

Solutions? #

UPDATE: People were asking by Twitter how to deal with this. Well, I can only think on some suggestions:

1. Don’t disable zoom ability in the viewport metatag, such as in user-scalable=no.
2. If you have text offer the user the ability to increase and decrease font size and store the settings in Local Storage or a cookie for next visit. It can be easily implemented using JavaScript and you can change font-size or -webkit-text-size-adjust.

Any other solution? Feel free to leave a comment

PS: Don’t get me wrong… I’ve tried the iPad mini and I like it; it feels good and the screen is much more useful than other 7″ similar tablets.