javascript - 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.

Answer 1

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.