How to Detect iPad Mini Using Javascript

Detect iPad Mini vs iPad using javascript

Update: Please read this comment by Benjie. It looks like these values are reporting the viewport width and height at the time of tab creation.

I just discovered an easy way to detect iPad Mini users using only Javascript. I was inspecting all properties of the default browser objects such as window, navigator and document, until I tried screen and found the following differences:

iPad 2

screen.availWidth = 768
screen.availHeight = 1004

iPad Mini

screen.availWidth = 748
screen.availHeight = 1024

As you can see, everything is the same except availWidth and availHeight.

Never lose a single business lead or enquiry again! Get my latest plugin Storage for Contact Form 7 now!

Buy now for only $11 →

15 Comments

  1. Benjie says:

    That looks to me like it’s reporting the landscape dimensions on iPad Mini – sure you didn’t open the page in landscape and then rotate? If not then I suspect it’s a bug in the OS that’ll soon be fixed. The devices have the same resolution screen.

    • Kaspars says:

      Benjie, these are actual screenshots from two iPads. Unfortunately, I did some changes to the test file after taking the screenshots and now I can’t really replicate the results. Do you have any ideas on why it could have reported the values it reported?

  2. Eric Berna says:

    This is merely a detector of how many tabs are open in Safari. My iPad 3 reports the same results as your iPad 2 results if only one tab is open in Safari, like your screen capture. Yet my iPad 3 reports the same results as your iPad mini results if two tabs are open.

  3. Benjie says:

    Yep – rotate the device to landscape, open the web page and refresh: you should get results listed above. Then rotate the device to portrait and the results on the screen won’t change (unless you refresh). Thus you are seeing landscape results (the rotation to portrait happens after the document.write calls). This should work on iPad 2 too?

    (NOTE: I’m just guessing here, I’ve not tested myself since I don’t have an iPad Mini nor any iPad running iOS6.)

  4. Benjie says:

    Ah hah – an interesting find indeed!

  5. John Cromartie says:

    I believe this is an OS difference.

  6. Eric Berna says:

    Maybe you’ve found a bug in Safari, since it’s reporting different values for essentially the same visible areas. Whatever the reason for these different values, if used for detecting an iPad mini it will give false positives in some situations on other iPads.

  7. Martín says:

    iPad 2, iOS 6

    Safari with two tabs, Chrome with one or two tabs:
    screen.availWidth = 768
    screen.availHeight = 1004

    Safari, with one tab:
    screen.availWidth = 748
    screen.availHeight = 1024

  8. Martín says:

    It sure looks like a Webkit bug. Too bad I don’t have an iPad mini, so there’s not much I could try.

    Good luck with your research!

  9. Ryan Hellyer says:

    I think in most situations, it would be best to use media queries with cm as the unit rather than px. Targetting specific devices seems a little drastic considering how many potential combinations there are. Basing designs on screen size seems more reliable long term.

    • Kaspars says:

      Ryan, the problem with absolute measures in CSS such as cm and in is that they have no relation to the actual centimeters or inches. A quote from the official spec:

      Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements.

      Just because browser vendors have agreed to assume that 1 inche will always be 96 pixels and pixels these days are no longer the actual pixels of the monitor.

Leave a Reply