Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » Detecting Device and Orientation in Javascript

Detecting Device and Orientation in Javascript

Published on April 8th, 2012

Here is the code that I’m using in Javascript to determine whether or not I have an iPhone or an iPad in Portrait or Landscape mode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function isiPhone() {
    if (( navigator.platform == 'iPhone' ) || 
           ( navigator.platform == 'iPod' ) || 
           ( navigator.platform == 'iPhone Simulator')) {
        return true;
    } else {
        return false;
    }
    return false;
}
 
function isiPad() {
    if (( navigator.platform == 'iPad' ) || 
          ( navigator.platform == 'iPad Simulator' )) {
        return true;
    } else {
        return false;
    }
    return false;
}
 
function isLandscape() {
    if (isiPhone()) {
        if ($(window).width() >= 480)   {
            return true;
        } else {
            return false;
        }
    }
    if ($(window).width() >= 1024)   {
        return true;
    } else {
        return false;
    }
    return false;
}
function isiPhone() {
    if (( navigator.platform == 'iPhone' ) || 
           ( navigator.platform == 'iPod' ) || 
           ( navigator.platform == 'iPhone Simulator')) {
        return true;
    } else {
        return false;
    }
    return false;
}

function isiPad() {
    if (( navigator.platform == 'iPad' ) || 
          ( navigator.platform == 'iPad Simulator' )) {
        return true;
    } else {
        return false;
    }
    return false;
}

function isLandscape() {
    if (isiPhone()) {
        if ($(window).width() >= 480)   {
            return true;
        } else {
            return false;
        }
    }
    if ($(window).width() >= 1024)   {
        return true;
    } else {
        return false;
    }
    return false;
}

The code is pretty straight-forward. I put it in a separate .js file, and then include it with most of my projects.

I added a new one yesterday to detect the version of iOS because the ImageFilter plugins that I’m using in Demotivate HD is only supported in 5.0 and later. I didn’t want to piss off my users by increasing the minimum requirement, so this worked nicely.

1
2
3
4
5
6
7
8
function isOld() {
    if (/OS [1-4]_/i.test(navigator.userAgent)) {
        return true;
    } else {
        return false;
    }
    return false;
}
function isOld() {
    if (/OS [1-4]_/i.test(navigator.userAgent)) {
        return true;
    } else {
        return false;
    }
    return false;
}

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl’s work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


 

Leave a Reply

© 2012 zSprawl's zApps

Fork me on GitHub