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?

Answer 1

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.