检测移动设备的最佳方法是啥？

Posted 2023-03-08

【中文标题】检测移动设备的最佳方法是啥？

【英文标题】：What is the best way to detect a mobile device?检测移动设备的最佳方法是什么？

【发布时间】：2011-03-31 16:43:26

【问题描述】：

有没有办法在 jQuery 中检测用户是否在使用移动设备？类似于 CSS @media 属性的东西？如果浏览器在手持设备上，我想运行不同的脚本。

jQuery $.browser 函数不是我想要的。

【问题讨论】：

提供专门用于移动设备的移动 URL。这是大多数主要网站处理移动设备的方式。见m.google.com。

jQuery 没有，也不能做任何事情。它提供跨浏览器的 DOM 遍历和操作、浏览器之间的简单动画和 ajax，并为插件创建一个骨架框架。在向专门询问 jQuery 解决方案之前，请注意 jQuery 的局限性。

用户代理是不断移动的目标，阅读这篇文章的每个人都应该非常警惕用户代理嗅探

什么是“移动”设备？它是支持触控的设备吗（包括 Chrome Pixels 和带有鼠标的 Windows 8 笔记本电脑）？它是一个小屏幕的设备（视网膜 iPad 怎么样）？它是 CPU 速度慢的设备吗？还是互联网连接速度慢的设备？根据您想做什么，这个问题的答案会有所不同。瞄准屏幕分辨率或触摸很容易。如果您想为某些设备提供较小的内容或不太密集的 JS，那么就没有灵丹妙药了。测试 window.navigator.connection 并退回到（讨厌的、糟糕的、不明智的）userAgent 嗅探。我的 2 美分。

@Cole"Cole9"Johnson 我的观点完全正确。 “移动”似乎被用作触摸、慢速 CPU、慢速网络和小屏幕的总称。但这些都不是完美的假设。我相信单独考虑这些将产生比为一些模糊的“移动”概念设计更好的产品。因此，我向 OP 提出了这个问题。

【参考方案1】：

我知道关于这种检测的问题很老了。

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

// this function will check the width of scroller
// if scroller width is less than 10px 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>

【讨论】：

我喜欢这个解决方案，我们有什么理由不应该使用它吗？

绝对精彩！而且它完全是跨浏览器的。谢谢！编辑：最好检查(dv.offsetWidth - dv.clientWidth) == 0，因为如果窗口放大，滚动条会小于10px，这是大多数高分辨率但小屏幕的现代笔记本电脑的情况（即15.6英寸屏幕上的4k分辨率）

多么独特的解决方案。我还没有在其他任何地方看到这个。我可以看到这会遇到隐藏滚动条的问题（例如::-webkit-scrollbar display: none ）有人测试过吗？

@oldboy 尝试为div (id="divscr") 设置可见scrollbar。我不使用chrome，也不想安装它只是为了测试。有人吗？

【参考方案2】：

编者注：用户代理检测不是现代网络应用的推荐技术。请参阅此答案下方的 cmets 以确认此事实。建议使用特征检测和/或媒体查询的其他答案之一。

---

您可以使用简单的 javascript 来检测它，而不是使用 jQuery：

if( /android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
 // some code..

或者您可以将它们结合起来，使其更易于通过 jQuery...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

现在$.browser 将为上述所有设备返回"device"

注意：$.browser 已在 jQuery v1.9.1 上删除。但是你可以使用 jQuery 迁移插件Code

---

更彻底的版本：

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4)))  
    isMobile = true;

【参考方案3】：

在一行javascript中：

var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent));

如果用户代理包含“Mobi”（根据 MDN）并且 ontouchstart 可用，那么它很可能是移动设备。

编辑：更新正则表达式代码以响应 cmets 中的反馈。使用 regex/mobi/i i 使其不区分大小写，并且 mobi 匹配所有移动浏览器。见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox

【参考方案4】：

IE10+ 解决方案只使用matchMedia:

const isMobile = () => window.matchMedia('(max-width: 700px)').matches

isMobile() 返回一个布尔值

【参考方案5】：

你可以像这样非常简单地做简单的事情

(window.screen.width < 700) 
    //The device is a Mobile
 else 
    //The device is a Desktop

【讨论】：

仅仅因为视口是

@sea26.2 这是真的。然而，就我们的目的而言，它实际上工作得更好，因为我们希望我们的 javascript 与我们的 CSS 媒体查询正确交互。

这段代码不应该检查它是纵向还是横向？或者一般只有多少像素？为什么不if (window.screen.width < window.screen.height)？

【参考方案6】：

屏幕可能在分辨率较小的台式机上或在分辨率较宽的手机上，因此，结合在此问题中找到的两个答案

const isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (/Mobi|Tablet|iPad|iPhone/i.test(navigator.userAgent) || isMobile.matches) 
    console.log('is_mobile')

【参考方案7】：

这就是我的工作：

function checkMobile() 
  var os = GetOS();
  if (os == "Android OS" || os == "ios") 
     // do what you wanna do
     return true
  

并重定向我添加 location.href="mobile.website.com" 然后添加这个body标签

<body onload="checkMobile()"></body>

【参考方案8】：

对我来说，小就是美，所以我正在使用这种技术：

在 CSS 文件中：

/* Smartphones ----------- */
@media only screen and (max-width: 760px) 
  #some-element  display: none; 

在 jQuery/JavaScript 文件中：

$( document ).ready(function()       
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') 
        is_mobile = true;       
    

    // now I can use is_mobile to run javascript conditionally

    if (is_mobile == true) 
        //Conditional script here
    
 );

我的目标是让我的网站“适合移动设备”。所以我使用 CSS 媒体查询根据屏幕大小显示/隐藏元素。

例如，在我的移动版本中，我不想激活 Facebook Like Box，因为它会加载所有这些个人资料图片和内容。这对移动访问者不利。因此，除了隐藏容器元素之外，我还在 jQuery 代码块（上图）中执行此操作：

if(!is_mobile) 
    (function(d, s, id) 
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    (document, 'script', 'facebook-jssdk'));

你可以在http://lisboaautentica.com看到它的实际应用

我仍在开发移动版本，所以在撰写本文时，它仍然看起来不像应有的样子。

更新dekin88

有一个内置的 JavaScript API 用于检测媒体。 而不是使用上述解决方案，只需使用以下内容：

$(function()       
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) 
        //Conditional script here
    
 );

浏览器支持： http://caniuse.com/#feat=matchmedia

这种方法的优势在于它不仅更简单、更短，而且您可以在必要时有条件地分别定位不同的设备，例如智能手机和平板电脑，而无需在 DOM 中添加任何虚拟元素。

【讨论】：

-1 screen.width property 是一个全局变量。无需随意向 DOM 添加元素并不必要地引入 CSS 媒体查询。另外，如果浏览器在桌面上并且用户调整了窗口大小，$is_mobile 将不会被更新。

为什么不：if( screen.width <= 480 ) // is mobile

你刚刚改造了window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

【参考方案9】：

你们的工作量太大了。

if (window.screen.availWidth <= 425) 
   // do something

您可以通过 JS 在页面加载时执行此操作。无需编写长字符串列表来尝试捕获所有内容。哎呀，你漏了一个！然后你必须回去改变它/添加它。更流行的手机尺寸约为 425 宽或更小（纵向模式），平板电脑约为 700 左右，更大的可能是笔记本电脑、台式机或其他更大的设备。如果您需要移动横向模式，也许您应该在 Swift 或 Android Studio 中工作，而不是传统的 Web 编码。

附注：发布时这可能不是可用的解决方案，但现在可以使用。

【参考方案10】：

只需复制以下函数，它就会返回一个布尔值。它的 regex 看起来像标记的答案，但它有一些区别：

const isMobile = () =>
  /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series([46])0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
    navigator.userAgent
  ) ||
  /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br([ev])w|bumb|bw-([nu])|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do([cp])o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly([-_])|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ \-/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja([tv])a|jbro|jemu|jigs|kddi|keji|kgt([ /])|klon|kpt |kwc-|kyo([ck])|le(no|xi)|lg( g|\/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30([02])|n50([025])|n7(0([01])|10)|ne(([cm])-|on|tf|wf|wg|wt)|nok([6i])|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c([-01])|47|mc|nd|ri)|sgh-|shar|sie([-m])|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel([im])|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c([- ])|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
    navigator.userAgent.substr(0, 4)
  );

【参考方案11】：

在 try/catch 块中使用多种检测技术的 ES6 解决方案

该函数包括创建一个“TouchEvent”，寻求对“ontouchstart”事件的支持，甚至查询mediaQueryList对象。

有意地，一些失败的查询会抛出一个新的错误，因为我们在 try/catch 块中，我们可以使用它作为回退来咨询用户代理。

我没有使用测试，在许多情况下它可能会失败并指出误报。

它不应该用于任何类型的实际验证，但在数据量可以“原谅”精度不足的分析和统计的一般范围内，它可能仍然有用。

const isMobile = ((dc, wd) => 
    // get browser "User-Agent" or vendor ... see "opera" property in `window`
    let ua = wd.userAgent || wd.navigator.vendor || wd.opera;
    try 
        /**
         * Creating a touch event ... in modern browsers with touch screens or emulators (but not mobile) does not cause errors.
         * Otherwise, it will create a `DOMException` instance
         */
        dc.createEvent("TouchEvent");

        // check touchStart event
        (('ontouchstart' in wd) || ('ontouchstart' in dc.documentElement) || wd.DocumentTouch && wd.document instanceof DocumentTouch || wd.navigator.maxTouchPoints || wd.navigator.msMaxTouchPoints) ? void(0) : new Error('failed check "ontouchstart" event');

        // check `mediaQueryList` ... pass as modern browsers
        let mQ = wd.matchMedia && matchMedia("(pointer: coarse)");
        // if no have, throw error to use "User-Agent" sniffing test
        if ( !mQ || mQ.media !== "(pointer: coarse)" || !mQ.matches ) 
            throw new Error('failed test `mediaQueryList`');
        

        // if there are no failures the possibility of the device being mobile is great (but not guaranteed)
        return true;
     catch(ex) 
        // fall back to User-Agent sniffing
        return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(ua) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.substr(0,4));
    
)(document, window);


// to show result
let container = document.getElementById('result');

container.textContent = isMobile ? 'Yes, your device appears to be mobile' : 'No, your device does not appear to be mobile';

<p id="result"></p>

---

用于测试用户代理的正则表达式有点旧，可在网站http://mobiledetect.com 上找到，该网站已不再运行。

也许有更好的模式，但我不知道。

---

字体：

触摸事件

：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

ontouchstart

：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchstart

mediaQueryList

：https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

---

PS：

因为无论是通过检查特征，还是通过使用正则表达式检查用户代理字符串，都无法以 100% 的准确度进行识别。上面的代码 sn-p 应仅视为：“此问题的另一个示例”，以及：“不建议在生产中使用”。

【讨论】：

那么你建议使用什么进行“真实”验证？？

【参考方案12】：

我使用这个解决方案，它适用于所有设备：

if (typeof window.orientation !== "undefined" || navigator.userAgent.indexOf('IEMobile') !== -1) 
   //is_mobile

【讨论】：

我正在考虑这个，但后来我想到当用户从 chrome 菜单请求桌面站点时，这是通过 User-Agent 字符串完成的，并且不再起作用。

window.orientation 不幸的是现在已被弃用，它的替代品也适用于桌面 - 所以恐怕不再有用了。 :(

【参考方案13】：

利用前面提到的sequielo 解决方案，并添加了宽度/高度检查功能（避免屏幕旋转错误）。为了选择移动视口的最小/最大边框，我使用这个资源https://www.mydevice.io/#compare-devices

function isMobile() 
    try document.createEvent("TouchEvent"); return true; 
    catch(e) return false; 


function deviceType() 
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),screenType;
    if (isMobile())
        if ((width <= 650 && height <= 900) || (width <= 900 && height <= 650))
            screenType = "Mobile Phone";
        else
            screenType = "Tablet";
    
    else
        screenType = "Desktop";
  return screenType;

【讨论】：

是否有任何理由尝试创建触摸事件而不是检查touchstart 是否存在？

【参考方案14】：

很好的答案，谢谢。支持 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";

【讨论】：

如果您尝试处理移动设备的悬停/拖动事件，我想说这是最简单（也许不是最好）的解决方法。我使用这样的东西来创建一个“isMobile”布尔值，然后检查每个悬停/鼠标悬停事件。无论如何，那是我的两分钱。添加更多需要用户交互的 js 库或代码对我来说没有太大意义；如果我错了，请纠正我。

既然你用的是正则表达式，那就实际使用吧：if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/))self.location = "top.htm"

【参考方案15】：

粗略，但足以限制加载更大的资源，例如手机与平板电脑/台式机上的视频文件 - 只需寻找较小的宽度或高度以覆盖两个方向。显然，如果桌面浏览器已调整大小，则下面可能会错误地检测到手机，但这对我的用例来说很好/足够接近。

为什么是 480，根据我找到的手机设备尺寸信息，这看起来是正确的。

if(document.body.clientWidth < 480 || document.body.clientHeight < 480) 
  //this is a mobile device

【参考方案16】：

根据您要检测移动设备的目的（这意味着此建议并不适合每个人的需求），您可以通过查看 onmouseenter-to-onclick 毫秒差异来区分，就像我在 @987654321 中描述的那样@。

【参考方案17】：

您可以使用媒体查询来轻松处理它。

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

【参考方案18】：

根据Mozilla - Browser detection using the user agent：

总之，我们建议在用户代理中的任意位置查找字符串“Mobi”来检测移动设备。

像这样：

if (/Mobi/.test(navigator.userAgent)) 
    // mobile!

这将匹配所有常见的移动浏览器用户代理，包括移动 Mozilla、Safari、IE、Opera、Chrome 等。

Android 更新

EricL 建议也将 Android 作为用户代理进行测试，因为平板电脑的 Chrome user agent string 不包括“Mobi”（但手机版本有）：

if (/Mobi|Android/i.test(navigator.userAgent)) 
    // mobile!

【讨论】：

链接的文章提到：如果设备足够大以至于没有标记“Mobi”，您应该为您的桌面站点提供服务（作为最佳实践，无论如何都应该支持触摸输入，随着越来越多的带有触摸屏的台式机出现）。

【参考方案19】：

如果要测试用户代理，正确的方法是测试用户代理，即测试navigator.userAgent。

如果user 伪造了这个，他们不必担心。如果您test.isUnix()，您以后不必担心系统是否为 Unix。

作为用户更改 userAgent 也可以，但如果这样做，您不会期望网站能够正确呈现。

如果您希望为 Microsoft 浏览器提供支持，则应确保内容的前几个字符包含并测试您编写的每个页面。

底线...始终按照标准进行编码。然后破解它，直到它在当前版本的 IE 中工作并且不要期望它看起来不错。这就是 GitHub 所做的，他们刚刚获得了 1 亿美元。

【参考方案20】：

我为我的 .NET 应用程序这样做。

在我共享的_Layout.cshtml 页面中，我添加了这个。

@
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;


<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

然后检查您网站中的任何页面（jQuery）：

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>

【讨论】：

恐怕这与 jQuery 无关

【参考方案21】：

如果发现仅检查 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...

【参考方案22】：

这里还有一个使用纯 JavaScript (es6) 实现的建议

const detectDeviceType = () =>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        ? 'Mobile'
        : 'Desktop';

detectDeviceType();

【讨论】：

绝对不需要arrow-syntax函数。

【参考方案23】：

<script>
  function checkIsMobile()
      if(navigator.userAgent.indexOf("Mobile") > 0)
        return true;
      else
        return false;
      
   
</script>

如果您使用任何浏览器并尝试获取 navigator.userAgent，那么我们将获得类似于以下内容的浏览器信息

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

如果你在移动设备上做同样的事情，你会得到关注

Mozilla/5.0 (Linux; Android 8.1.0; Pixel Build/OPP6.171019.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.98 Mobile Safari/537.36

每个移动浏览器都会有用户代理，其字符串包含 "Mobile" 所以我在我的代码中使用上面的 sn-p 来检查当前用户代理是否是 web/mobile。根据结果​​，我将进行必要的更改。

【参考方案24】：

我知道这个老问题，有很多答案，但我认为这个功能很简单，有助于检测所有移动设备、平板电脑和计算机浏览器，它就像一个魅力。

function Device_Type() 

    var Return_Device; 
    if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
    
        if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
        
            Return_Device = 'Tablet';
        
        else
        
            Return_Device = 'Mobile';
        
    
    else if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
    
        Return_Device = 'Tablet';
    
    else
    
        Return_Device = 'Desktop';
    

    return Return_Device;

【参考方案25】：

添加：

在 iOS 9.x 的某些版本中，Safari 不会在 navigator.userAgent 中显示“iPhone”，而是在 navigator.platform 中显示它。

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile)
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    

【参考方案26】：

我还建议使用小型 JavaScript 库 Bowser，是的，不是 r。它基于navigator.userAgent，并针对包括 iPhone、Android 等在内的所有浏览器进行了很好的测试。

https://github.com/ded/bowser

你可以简单地说：

if (bowser.msie && bowser.version <= 6) 
  alert('Hello China');
 else if (bowser.firefox)
  alert('Hello Foxy');
 else if (bowser.chrome)
  alert('Hello Silicon Valley');
 else if (bowser.safari)
  alert('Hello Apple Fan');
 else if(bowser.iphone || bowser.android)
  alert('Hello mobile');

【参考方案27】：

Checkout http://detectmobilebrowsers.com/，它为您提供检测各种语言的移动设备的脚本，包括

JavaScript、jQuery、php、JSP、Perl、Python、ASP、C#、ColdFusion 等等

【参考方案28】：

这是我在项目中使用的代码：

function isMobile() 
 try 
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) 
     return true;
    ;
    return false;
  catch(e) console.log("Error in isMobile"); return false; 

【参考方案29】：

你也可以像下面这样检测它

$.isIPhone = function()
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

;
$.isIPad = function ()
    return (navigator.platform.indexOf("iPad") != -1);
;
$.isAndroidMobile  = function()
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
;
$.isAndroidTablet  = function()
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
;

【参考方案30】：

mobiledetect.net怎么样？

其他解决方案似乎太基础了。这是一个轻量级的 PHP 类。它使用 User-Agent 字符串结合特定的 HTTP 标头来检测移动环境。您还可以通过使用适用于 WordPress、Drupal、Joomla、Magento 等的任何 3rd 方插件从 Mobile Detect 中受益。

【讨论】：

因为这个问题是针对 jQuery 的？

PHP 脚本的准确性如何？它比在客户端检测更准确吗？