Detect iPad Mini in HTML5

Detect iPad Mini in HTML5

Apple’s iPad Mini is a smaller clone of the iPad 2 in more ways than we’d want. In JavaScript, the window.navigator object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success.
Why is this important?
As the iPad Mini and iPad 2 screens are identical in pixels but vary in actual size (inches / centimeters), they vary in PPI (pixels per inch).
For web applications and games to offer a friendly user interface, certain elements are adjusted in size relative to a user’s thumb or finger position, thus, we may want to scale certain images or buttons to provide for that better user experience.
Things I have tried so far (including some pretty obvious approaches):

CSS element width in cm unit
CSS media queries (such as resolution and -webkit-device-pixel-ratio)
SVG drawings in similar units
Doing all sorts of CSS webkit transforms for a set time and counting rendered frames with requestAnimFrame (I was hoping to detect a measurable difference)

I’m fresh out of ideas. How about you?
Thanks for the responses so far. I would like to comment on people voting against detecting iPad mini versus 2 as Apple has uhm, one guideline to rule them all. Okay, here’s my reasoning why I feel it really makes all sense in the world to know if a person is using an iPad mini or a 2. And do with my reasoning what you like.
The iPad mini is not only a much smaller device (9.7 inch versus 7.9 inch), but its form factor allows for a different usage. The iPad 2 is usually held with two hands when gaming unless you’re Chuck Norris. The mini is smaller, but it is also much lighter and allows for gameplay where you hold it in one hand and use another to swipe or tap or whatnot. As a game designer and developer myself, I’d just like to know if it’s a mini so I can choose to provide the player with a different controlscheme if I want (for instance after A/B testing with a group of players).
Why? Well, it’s a proven fact that the majority of users tend to go with the default settings, so leaving out a virtual thumbstick and putting some other tap-based control on the screen (just giving an arbitrary example here) when the player loads up the game for the first time is what I, and probably other game designers, would love to be able to do.
So IMHO this goes beyond the thick fingers / guidelines discussions and is just something Apple and all other vendors ought to do: allow us to uniquely identify your device and think different instead of following guidelines.


Solution 1:

Play a stereo audio file and compare the accelerometer response when volume is high on the right channel and on the left channel – iPad2 had mono speakers whereas iPad Mini has built-in stereo speakers.

Need your help to gather the data please visit this page and help me collect data for this crazy idea. I don’t have an iPad mini so I really need your help

Solution 2:

Update: It looks like these values are reporting the viewport width and height at the time of tab creation, and they don’t change upon rotation, so this method can’t be used for device detection!

You can use the either screen.availWidth or screen.availHeight as they seem to be different for iPad Mini and iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024


Solution 3:

I understand this might be a bit low-tech solution, but since we can’t seem to come up with anything else yet..

I am assuming you already check for most of the other devices, so I see the following scenarios possible.

You could check for ALL the possible most popular devices that require special CSS/sizing, and if it matches none of those either assume it’s an iPad mini or simply ask the user?

// Device checks here
else {
  // it would probably be better to make this a nicer popup-thing
  var mini = prompt("Are you using a iPad mini? Press yes for a better user experience");
  // Store the result for future visits somehow.

I know that might seem like a stupid approach right now, but if we currently have no way of deciding if the device is a iPad mini or an iPad 2 at least the website will be usable with iPad mini devices doing something like this.

You could even go with something like this:

“To give you the best possible browsing experience we try to detect your device-type to customise the website to your device. Unfortunately due to limitations this is not always possible and we can’t currently determine if you use an iPad 2 or an iPad mini by using these methods.

For the best possible browsing experience, please select what device you are using below.

This choice will be stored for future visits to the website on this device.

[] iPad 2 
[*] iPad mini
[] Ancient blackberry device

I am not entirely familiar with what you can and can’t do client-side in Javascript. I know you can get a user’s IP, but is it possible to get a user’s mac address? Are those ranges different between iPad2’s and iPad mini’s?

Solution 4:

I know that is a horrible solution, but at the moment the only way to differentiate between an iPad Mini and an iPad 2 is to check its build number and map each build number with the related device.

Let me give you an example: iPad mini, version 6.0, is exposing “10A406” as build number, while iPad 2 is exposing “10A5376e“.

This value can be easily obtained through a regex on the user agent (window.navigator.userAgent); that number is prefixed with “Mobile/“.

Unfortunately this is the only unequivocal way to detect an iPad Mini; I would suggest to adopt a viewport related approach (where supported, using vh / vw units) to properly display contents on different screen sizes.

Solution 5:

tl;dr Don’t compensate for the difference between iPad mini and iPad 2 unless you’ll also compensate between fat and skinny fingers.

Apple appears to be deliberately trying not to let you tell the difference. Apple appears not to want us to write different code for the different size versions of iPads. Not being part of Apple myself, I don’t know this for sure, I’m just saying that this is what it appears like. Maybe, if the developer community comes up with a fancy detector for iPad minis, Apple may deliberately break that detector in future versions of iOS. Apple wants you to set your minimum target size to 44 iOS points, and iOS will display that in two sizes, the larger iPad size and the smaller iPhone/iPad mini size. 44 points is plenty generous, and your users will certainly know if they are on the smaller iPad, so can compensate on their own.

I suggest stepping back to your stated reason for asking for the detector: adjusting target size for end user comfort. By deciding to design for one size on the large iPad and another size on the small iPad you are deciding that all people have the same size fingers. If your design is tight enough that the difference in size from an iPad 2 and an iPad mini makes a difference, than the size of fingers between me and my wife will make a bigger difference. So compensate for user finger size, not iPad model.

I have a suggestion on how to measure finger size. I’m a native iOS developer, so I don’t know if this can be accomplished in HTML5, but here’s how I would measure finger size in a native app. I’d have the user pinch two objects together, then measure how close they get together. Smaller fingers will get the objects closer together, and you can use this measurement to derive a scaling factor. This automatically adjusts for iPad size. The same person will have a larger measurement of on screen points on an iPad mini than on an iPad 2. For a game you can call this a calibration step, or not even call it out. Have it as a starting step. For example in a shooting game have the player put the ammo in the gun with a pinching motion.

Solution 6:

Ask the user to drop their iPad from several thousand feet above the ground. Then use the internal accelerometer to measure the time it takes for the iPad to reach terminal velocity. The larger iPad has a greater drag coefficient and should reach terminal velocity in less time than an iPad Mini.

Here is some sample code to get you started.

function isIPadMini( var timeToReachTerminalVelocity )
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);

You almost certainly need to revisit this code when Apple inevitably releases the next iPad in a different form factor. But I am sure you will stay on top of things and maintain the this hack for each new version of the iPad.