Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

javascript - Detecting iPhone 5 and any iOS device below it

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...