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.

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.

• javascript
• iphone
• ios5
• ios4
• user-agent

• 1 @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 Commented Sep 20, 2012 at 3:21
• @nhahtdh: Why would you ment and then vote to close? Also, care to give a reason? – gotnull Commented Sep 20, 2012 at 3:26
• It was a knee-jerk reaction without carefully reading what you are asking about. – nhahtdh Commented Sep 20, 2012 at 3:28
• @nhahtdh: Fair enough, and the vote to close was a knee-jerk as well? – gotnull Commented Sep 20, 2012 at 3:29
• 1 @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 Commented Sep 20, 2012 at 4:17

2 Answers 2

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.

2 lines are enough:

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