Detecting iPhone 5 and any iOS device below it

Question

A question was asked on SO about the iPhone 4 user agent and the iOS 5.0 user agent.

I use the following to detect different mobile devices, viewport and screen.

I'd like to be able to distinguish between the iPhone 5 and all other iOS devices. As far as I know, the line I'm using to detect the iOS 5.0 user agent var iPhone5 would also apply to any iOS device running iOS 5.0, so technically it's incorrect.

var pixelRatio = window.devicePixelRatio || 1;

var viewport = {
    width: window.innerWidth,
    height: window.innerHeight
};

var screen = {
    width: window.screen.availWidth * pixelRatio,
    height: window.screen.availHeight * pixelRatio
};

var iPhone = /iPhone/i.test(navigator.userAgent);
var iPhone4 = (iPhone && pixelRatio == 2);
var iPhone5 = /iPhone OS 5_0/i.test(navigator.userAgent); // ?
var iPad = /iPad/i.test(navigator.userAgent);
var android = /android/i.test(navigator.userAgent);
var webos = /hpwos/i.test(navigator.userAgent);
var iOS = iPhone || iPad;
var mobile = iOS || android || webos;

window.devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device. window.devicePixelRatio = physical pixels / dips.

More info here.

@nhahtdh: Well, that's the iOS 5.0 user agent not the iPhone 5. Remember, iOS 5.0 can run on any iOS device including the iPhone 5, however I'd like to distinguish between an iPhone 4 and an iPhone 5 for example. — gotnull, Sep 20 '12 at 03:21
@nhahtdh: Why would you comment and then vote to close? Also, care to give a reason? — gotnull, Sep 20 '12 at 03:26
It was a knee-jerk reaction without carefully reading what you are asking about. — nhahtdh, Sep 20 '12 at 03:28
@nhahtdh: Fair enough, and the vote to close was a knee-jerk as well? — gotnull, Sep 20 '12 at 03:29
There is no distinct user agent for individual iOS devices. What are you trying to accomplish? — Jonathan Grynspan, Sep 20 '12 at 03:29
@JonathanGrynspan: Trying to detect between an iPhone 5 and anything below? — gotnull, Sep 20 '12 at 03:30
@Fulvio: I do both at the same time - no need to worry, since your question needs 4 more idiot like me to close. — nhahtdh, Sep 20 '12 at 03:33
@Fulvio Yes, but *why* do you want to do that? What will you do differently for an iPhone 5? — Jonathan Grynspan, Sep 20 '12 at 04:03
@JonathanGrynspan: Screen width for a landscape platform 2D side-scroller game I'm developing. ;-) I think I've just answered my own question. I'll use the screen width for detection. *slaps face* — gotnull, Sep 20 '12 at 04:17

score 11 · Accepted Answer · edited Nov 20 '12 at 22:27

11

Why don't you detect based on the screen object -

screen.availWidth
screen.availHeight

On my iPhone 5 it reports 320 width and 548 height, which is its resolution in a non-retina form.

You should NOT use window.innerWidth and window.innerHeight due to it reporting the viewport size. If the page is zoomed in, it will report the size of the zoomed in area, and not the proper size of the available screen.

edited Nov 20 '12 at 22:27

Bubbles

3,795
1
24
25

answered Nov 20 '12 at 22:06

Rob

126
2
3

That's 568, not 548. – ForNeVeR Aug 01 '16 at 11:16

score 3 · Answer 2 · edited Nov 28 '16 at 23:22

3

2 lines are enough:

var iphone4 = (window.screen.height == (960 / 2));
var iphone5 = (window.screen.height == (1136 / 2));

edited Nov 28 '16 at 23:22

gotnull

26,454
22
137
203

answered May 13 '14 at 07:42

Weimin Ye

665
4
15

You also need user-agent detection. Screen size alone is not sufficient. – posit labs Jun 25 '15 at 23:55

Detecting iPhone 5 and any iOS device below it

2 Answers2

Linked