检测移动设备是否支持JavaScript的最简单方法

Question

如何使用JavaScript检测设备是否为移动设备是最简单的方法？

我想检查高度是否小于或等于iPhone浏览器视口高度。顺便问一下，iPhone或移动设备的常见视口高度是多少？

我在JavaScript中使用window.height;时遇到了一些问题，因为它返回未定义。然而，有人知道如何使用最佳和最简单的方法检测浏览器是否为移动设备吗？

- Irfan Mir

---

请转到 https://dev59.com/MWw15IYBdhLWcg3wWqf-，以了解如何使用JavaScript检测移动设备。 - Tamil Selvan C

@TamilSelvan 噢，好的。那么，我使用 window.height 并将其与 iPhone 浏览器视口高度进行比较的解决方案怎么样？你有什么想法吗？ - Irfan Mir

https://dev59.com/YnA75IYBdhLWcg3wBkO1 - Ryan

Answer 1

这是我为我的兴趣项目所拥有的：

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());
    }
};

你提出的使用尺寸的解决方案并不是一个好的解决方案。它依赖于实际设备的尺寸和许多其他变量。

- dchhetri

---

这看起来不错！谢谢你的分享。但是我该如何实现或使用它？例如，我只需要这样做 if(isMobile()){ //myCodeHere } 吗？ - Irfan Mir

你的代码和这段代码有什么区别，还是这只是更简洁的版本？ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ){ // some code.. } - Irfan Mir

我的代码更易用、易读。如果您想检测移动设备环境，通常需要编写冗长的if语句来避免错误；而我的代码只需调用Environment.isMobile()函数即可。将该代码包含在JavaScript文件中后，您可以轻松地使用if(Environment.isMobile()){ ... }进行判断。 - dchhetri