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.
Here is the test site that I used. It would be great if you could verify this by linking your screenshots in the comments.
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.
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.
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?
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.)
That is an interesting find, Eric! Yet, I can’t replicate that too. The tab bar is always visible so why would it report different values?
Yes, I can replicate this now, Benjie! It seems that those values are set on tab creation and are not adjusted on device rotation.
Ah hah – an interesting find indeed!
I believe this is an OS difference.
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.
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
That looks like a Webkit bug, Martín. Maybe it assumes that there is no tab bar displayed when only one tab is open, just like Safari on Desktop?
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!
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.
Ryan, the problem with absolute measures in CSS such as
cmandinis that they have no relation to the actual centimeters or inches. A quote from the official spec: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.