simplest way to detect if mobile device with javascript [duplicate]

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?

@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
– Irfan Mir, Commented May 26, 2013 at 2:25

dchhetri · Accepted Answer · 2013-05-26 02:28:40Z

20

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.

answered May 26, 2013 at 2:28

dchhetri

7,1766 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Irfan Mir Over a year ago

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 Over a year ago

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

dchhetri Over a year ago

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()){ ... }

Collectives™ on Stack Overflow

simplest way to detect if mobile device with javascript [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related