Mission: Impossible – iPad mini detection for HTML5

As you may know, the iPad mini is a new 7.9″ variant of the iPad tablet and one of the biggest questions out there today is how to detect it using server-side or client-side techniques.

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:

Don’t disable zoom ability in the viewport metatag, such as in user-scalable=no.

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.

@bowerbird – That sounds great. But how do we detect if the person gave you the correct answer? Oh, I know… let’s just ask the user if they lied or not. Turtles all the way down. I don’t think you understand the meaning of “detect” in this case.

Agree, would be great to detect. Our app works on all iOS devices to show objects in actual life size without the end user needing to do anything. If we can’t detect if it is an iPad 2 or Mini we’ll need them to verify. Here’s exactly how the screen shot from the site mentioned above looks in actual size: http://beta.lifesizer.com/view?user=9&ref=_67

@Bob, you didn’t read the whole post. I made it clear that detecting the iPad mini is not the important part, but detecting the dpi or other features it’s important. Having 19% smaller elements on the screen is important for some kind of apps/websites.

PPI’s the same as iPhone 3Gs, size of things in device-independent pixels is the same as all iPhones ever. If your touch targets are too small on iPad Mini, they’re too small on existing devices already.

Safari Mobile doesn’t allow WebGL, but the various other techniques can be tried (pixel fingerprint and text fingerprint). I suppose that, since the iPad Mini has a different hardware subsystem that a “true” iPad2, we can spot differences helping us differentiate the two.
The test isn’t very complicated, but can be a bit slow on mobile I suppose.
The test, run once, could be cached (localStorage/DB or cookie) for the next visit.

Maybe if enough noise is generated Apple will “fix” this with the next update. It’s not something as big as the maps in iOS6, but still an issue.

The bad part is when the user will face this problem he will be most likely angry with the webdeveloper, not knowing this is Apple/iPad Mini’s fault.

Until then, there was a question regarding this topic posted on StackOverflow recently, let’s hope someone will come up with a solution :D Ironically, the highest voted answer so far is basically linking and quoting your post

Joe, the problem with build number is that there is no way to assure that on the near future. Will the iPad Mini 3G have the same Build number? Will the UK or german version have a different build number? Will that difference remain in 6.0.2 or 6.1?

The resolution media query wouldn’t help you even if it was supported, since CSS units are “physical dots per CSS “, and CSS units are in terms of CSS pixels, not device pixels. (Which is to say, the resolution MQ is a weird-looking synonym for device-pixel-ratio, and not actually something that measures resolution.)

In my experience, web designers try to do too much to “figure out” what machine they’re running on. I often turn my iPhone to landscape to read a website because that increases the size of the text. But some sites that detect orientation will keep the text the same size when you switch to landscape and simply put more words on each line! These same sites will usually disable tap zoom, so you can’t even increase the font size that way.

Why not try to be less “smart” and just put a font scale button on the page. Give the user two sizes to choose from and make both sizes layout really nicely. So I can see text more clearly on my iPad Mini, but get better information density on my larger tablet?

I think by not trying to outsmart the user you’ll get a friendlier result

@Orion
We wouldn’t have to be smart at all if ancient designers wouldn’t have been that stupid and using pt for font-size …
To have regards on those (imho already broken) sites is breaking sites on any coming device in future. That doesn’t make sense at all.

If cm, in and pt would be a physical unit on handheld devices everything would be fine. And that’s something devs have thought of already back in the 80ies. I think we should respect those devs – not the bad web design of the 90ies.

My guess is that Apple wouldn’t want you to make exceptions for iPad mini compared to iPad, and nor would I, had I bought one.

The iPad mini is for those with smaller fingers and better eyesight than those who prefer the big iPad. Apple uses the same screen resolution as in the iPad 2 and didn’t bother to change anything in the UI, (thus making everything about 20% smaller) considering it’s not such a big deal for the mini buyer.

The iPad mini user eventually gets used to this zoom level (actually, i’d much prefer to have this zoom level on my big iPad, fitting more info on screen), and it would look awkward to suddenly be presented with something relatively bigger.

We wouldn’t have to be smart at all if ancient designers wouldn’t have been that stupid and using pt for font-size …
To have regards on those (imho already broken) sites is breaking sites on any coming device in future. That doesn’t make sense at all.

If cm, in and pt would be a physical unit on handheld devices everything would be fine. And that’s something devs have thought of already back in the 80ies. I think we should respect those devs – not the bad web design of the 90ies.

You can’t get things perfect for each and every device out there.
Even if you could afford all of them, you wouldn’t have the time to test on all of them.
Before writing up this post, have you checked how many visitors of all your sites, and others you’ve built, actually visited with an iPad Mini?

Apple sold this device to consumers.
But Apple obviously doesn’t care about, or doesn’t want these 2 devices to be distinguished.
Nor if a website looks a bit off on this device.
The most used browser technology (webkit) doesn’t offer a resolution.
CCS3 doesn’t offer a resolution.
JavaScript doesn’t offer a resolution.

Looks like there’s not more you can try, let alone do. So what are you trying to achieve with this?

How much money in hours have you already spent on this, and are you willing to continue to spend on this in the future?
On a device which will be replaced in 18 months max, and which is most likely used by a fraction of visitors to any website.

Make your content look good on iPad Mini, and show it unchanged on a regular iPad 2.
Or the other way round. Whatever rocks your boat.

Is there a significant processing speed difference that could be used to determine the ipad2 vs the ipad mini. If these are the only two models where it is difficult to determine which is which, then there may be a simple math calculation that processes significantly faster on the mini’s processor.