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:

  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.

Share
Loading Facebook Comments ...
  1. #1 written by Derryl November 5th, 2012 at 22:03

    It is really a bummer… scaling the full-size iPad version down to the Mini’s size yields some unfortunate results.

    It’d be nice to target a Mini-specific version, but lacking this ability, the other option is to make touch areas and text elements even *larger* on your iPad version, so that it scales down nicely.

    Many would disagree, but for those of us with larger hands (myself), I’d actually prefer large, more-white-spacey layouts on every single device I touch.

    RE Q
  2. #2 written by Marco Berrocal November 5th, 2012 at 23:06

    Just when you thought the job got easier. Christ….

    RE Q
  3. #3 written by bowerbird November 6th, 2012 at 00:23

    impossible to detect?

    how about if you ask the user
    if they are using an ipad mini?

    -bowerbird

    RE Q
  4. #4 written by Nick November 6th, 2012 at 00:42

    @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.

    RE Q
  5. #5 written by Luke November 6th, 2012 at 00:43

    Bowerbird: this article is about iPad mini detection for HTML5

    RE Q
  6. #6 written by Grant November 6th, 2012 at 01:31

    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

    RE Q
  7. #7 written by Bob November 6th, 2012 at 01:50

    Have you asked yourself the question why you need to actually check if it’s an iPad Mini though ?

    Design for the PPI of the iPad Mini if needed, and then you’ll automatically have a design suitable for all iPad’s.

    Screens have always had varying PPI, and the solution has always been to ensure you just dont make thing too small. Keep it to a reasonable minimum size and you’ll be fine.

    RE Q
  8. #8 written by firt November 6th, 2012 at 01:52

    @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.

    RE Q
  9. #9 written by Henry Skoglund November 6th, 2012 at 02:03

    If Apple could also shrink your body (and thus your fingers) by 19% when using the Mini, this problem wouldn’t exist, but until then…

    RE Q
  10. #10 written by Jeremy Suriel November 6th, 2012 at 06:04

    How about JavaScript to detect millisecond time differences in how the device responds to some API. There might be some common difference between the 2 devices with a specific feature / API call.

    RE Q
  11. #11 written by Martin Kool November 6th, 2012 at 07:20

    All we might be able to detect is cpu cycles per time passed, such with the javascript call to hit on each frame draw.

    RE Q
  12. #12 written by Ahmad Alfy November 6th, 2012 at 07:41

    @bowerbird Still not good enough. Imagine every website you visit using the iPad poping up asking …

    RE Q
  13. #13 written by Brion Vibber November 6th, 2012 at 09:13

    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.

    RE Q
  14. #14 written by JP Deblonde November 6th, 2012 at 09:39

    @firt : is it possible to use a technique like the one described in this paper (Pixel Perfect: Fingerprinting Canvas in HTML5) :
    http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf ?

    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.

    Unfortunately, I don’t have an iPad2 or mini at hand to test it…

    RE Q
  15. #15 written by Cedik November 6th, 2012 at 11:01

    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

    RE Q
  16. #16 written by Briggy November 8th, 2012 at 02:35

    A new devices comes out and we are already looking for patches and hacks to fix it.

    Good thing pinch and double tap to zoom works so well!

    RE Q
  17. #17 written by firt November 8th, 2012 at 02:39

    Well, double tab and pinch works only if the developer wanted. If the meta tag is there, good luck with that :)

    RE Q
  18. #18 written by Joe November 8th, 2012 at 16:01

    Build number detection? (back to device vs feature detection.. )
    iPad Mini 10A406
    iPad 2 10A5376e
    http://stackoverflow.com/a/13250944

    RE Q
  19. #19 written by firt November 8th, 2012 at 16:44

    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?

    RE Q
  20. #20 written by Edward O’Connor November 9th, 2012 at 17:57

    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.)

    RE Q
  21. #21 written by Edward O’Connor November 9th, 2012 at 17:58

    Err, the commenting stripped out some essential content. That should read:

    CSS resolution units are “physical dots per CSS length“, and CSS lengths are in terms of CSS pixels, not device pixels.

    RE Q
  22. #22 written by Orion November 9th, 2012 at 19:33

    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

    RE Q
  23. #23 written by Brett Jankord November 9th, 2012 at 22:09

    You could always take a page from Jeffrey Zeldman, and just increase your default font-size for all devices. http://www.zeldman.com/ Simple and easy fix.

    RE Q
  24. #24 written by Michael Trenkler November 11th, 2012 at 22:12

    @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.

    physical units, please. now!

    read: http://smus.com/physical-units/

    RE Q
  25. #25 written by Kaspars November 14th, 2012 at 13:55

    I just discovered that screen.availWidth and screen.availHeight are different for iPad Mini and iPad 2.

    Here is the blog post: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

    RE Q
  26. #26 written by firt November 14th, 2012 at 23:05

    Thanks. It seems like a bug because both values are incorrect. The problem is that with 6.1 (in beta now) the bug may be “solved” :S

    RE Q
  27. #27 written by Vaggelis Tsikalas February 5th, 2013 at 14:56

    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.

    RE Q
  28. #28 written by tecmobeto March 31st, 2013 at 21:33

    Have you asked yourself the question why you need to actually check if it’s an iPad Mini though ?

    RE Q
  29. #29 written by firt March 31st, 2013 at 22:36

    Sure, your eyes have the same resolution if you use iPad Mini or iPad. But everything looks 19% smaller on a Mini; on some kind of apps detecting that and applying a different font size is necessary.

    RE Q
  30. #30 written by Kontaktannonse May 4th, 2013 at 12:29

    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.

    physical units, please. now!

    RE Q
  31. #31 written by Robert June 17th, 2013 at 13:54

    I do not get this discussion.

    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.

    If they look the same, treat them the same.

    RE Q
  32. #32 written by dg June 17th, 2013 at 13:56

    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.

    RE Q

SetPageWidth