simplest way to detect if mobile device with javascript

Question

What is the simplest way to detect if the device is a mobile device with javascript?

I was thinking checking if the height is less than or equal to the iPhone's browser viewport height. Speaking of which, what is the iPhone's or a common viewport height for mobile devices?

I was having some troubles with window.height; in javascript as it was coming back undefined, however?

Anyone know how do best and simply detect if the browser is an mobile device with javascript?

see http://stackoverflow.com/questions/6666907/how-to-detect-a-mobile-device-with-javascript — Tamil Selvan C, May 26 '13 at 02:20
@TamilSelvan ah, okay. What about my solution of using `window.height` and comparing that to the iPhone's browser viewport height. Any idea how to do that? — Irfan Mir, May 26 '13 at 02:25
http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery — Ryan McCullagh, May 26 '13 at 02:33

score 20 · Accepted Answer · answered May 26 '13 at 02:28

This is what I have for my hobby project:

var Environment = {
    //mobile or desktop compatible event name, to be used with '.on' function
    TOUCH_DOWN_EVENT_NAME: 'mousedown touchstart',
    TOUCH_UP_EVENT_NAME: 'mouseup touchend',
    TOUCH_MOVE_EVENT_NAME: 'mousemove touchmove',
    TOUCH_DOUBLE_TAB_EVENT_NAME: 'dblclick dbltap',

    isAndroid: function() {
        return navigator.userAgent.match(/Android/i);
    },
    isBlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    isIOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    isOpera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    isWindows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    isMobile: function() {
        return (Environment.isAndroid() || Environment.isBlackBerry() || Environment.isIOS() || Environment.isOpera() || Environment.isWindows());
    }
};

Your solution about using dimension is not a good solution. It relies on the actual device dimension and many other variables.

This looks good! Thank you for sharing. But how would I implement or use it? For example do I just do `if(isMobile()){ //myCodeHere }` — Irfan Mir, May 26 '13 at 02:35
what is the difference between your code and this or is this just a more concise version? `if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ){ // some code.. }` — Irfan Mir, May 26 '13 at 02:37
The difference is that my code is more usuable and more readable. Whenever you want to detect mobile environment, you would have to do write that long if statement and could be error prone, with mines, its just `Environment.isMobile()` function call. To use it, you can include that code inside one of your javascript file. And then simple do `if(Environment.isMobile()){ ... }` — dchhetri, May 26 '13 at 02:40

simplest way to detect if mobile device with javascript

1 Answers1