如何使用jQuery检测移动设备

你不能完全依赖于 navigator.userAgent，因为不是每个设备都会透露它真实的操作系统。例如，在我的HTC上，它取决于设置（"使用移动版" 开/关）。 在 http://my.clockodo.com 上，我们简单地使用 screen.width 来检测小型设备。不幸的是，在一些Android版本中，screen.width 存在一个bug。你可以将这种方式与userAgent组合使用：

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

我很惊讶没有人指出一个不错的网站：http://detectmobilebrowsers.com/。它提供了多种语言的代码用于检测移动设备（包括但不限于）:

• Apache
• ASP
• C#
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Python
• Rails

如果您需要检测平板电脑，只需查看 "About" 部分以获取额外的正则参数。

Android 平板电脑、iPad、Kindle Fire 和 PlayBook 不会被默认检测到。要添加对平板电脑的支持，请在第一个正则表达式中添加 |android|ipad|playbook|silk。

发现仅检查navigator.userAgent不总是可靠的。通过检查navigator.platform也可以获得更高的可靠性。对先前答案的简单修改似乎效果更好：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

谢谢你的回答。为支持Windows Phone和Zune，需要进行小改进:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

我建议你查看http://wurfl.io/

简而言之，如果你导入一个小的JavaScript文件：

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

您将得到一个类似于以下JSON对象：

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

if(WURFL.is_mobile) {
    //dostuff();
}

我知道这是关于这种检测的一个非常老的问题。

我的解决方案基于滚动条的宽度（是否存在）。

// this function will check the width of scroller
// if scroller width is 0px it's mobile device

//function ismob() {
    var dv = document.getElementById('divscr');
    var sp=document.getElementById('res');
    if (dv.offsetWidth - dv.clientWidth == 10) {sp.innerHTML='Is mobile'; //return true; 
    } else {
    sp.innerHTML='It is not mobile'; //return false;
    }
//}

<!-- put hidden div on very begining of page -->
<div id="divscr" style="position:fixed;top:0;left:0;width:50px;height:50px;overflow:hidden;overflow-y:scroll;z-index:-1;visibility:hidden;"></div>
<span id="res"></span>

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}