StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODetect iPad Mini in HTML5
text
Body
copied!<p>Apple's iPad Mini is a smaller clone of the iPad 2 in more ways than we'd want. In JavaScript, the <code>window.navigator</code> object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success.</p> <p>Why is this important? </p> <p>As the iPad Mini and iPad 2 screens are identical in pixels but vary in actual size (inches / centimeters), they vary in <a href="http://en.wikipedia.org/wiki/Pixel_density">PPI</a> (pixels per inch).</p> <p>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.</p> <p>Things I have tried so far (including some pretty obvious approaches):</p> <ul> <li><code>window.devicepixelratio</code></li> <li>CSS element width in cm unit</li> <li>CSS media queries (such as <code>resolution</code> and <code>-webkit-device-pixel-ratio</code>)</li> <li>SVG drawings in similar units</li> <li>Doing all sorts of CSS webkit transforms for a set time and counting rendered frames with <code>requestAnimFrame</code> (I was hoping to detect a measurable difference)</li> </ul> <p>I'm fresh out of ideas. How about you?</p> <p><strong>Update</strong> 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.</p> <p>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 <a href="http://en.wikipedia.org/wiki/Chuck_Norris_facts">Chuck Norris</a>. 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 <strong>know</strong> 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). </p> <p>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 <strong>be able to</strong> do.</p> <p>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 <strong>think different</strong> instead of <strong>following</strong> guidelines.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload