JavaScript 如何检查手机/平板电脑的用户代理

Posted 2023-05-07

【中文标题】JavaScript 如何检查手机/平板电脑的用户代理

【英文标题】：JavaScript how to check User Agent for Mobile/Tablet

【发布时间】：2014-03-12 12:00:43

【问题描述】：

我目前正在为一个客户网站开发一些 JS 工作，该网站在桌面和平板电脑平台上具有不同的功能。考虑：

if(! navigator.userAgent.match(/android/i) &&
            ! navigator.userAgent.match(/webOS/i) &&
            ! navigator.userAgent.match(/iPhone/i) &&
            ! navigator.userAgent.match(/iPod/i) &&
            ! navigator.userAgent.match(/iPad/i) &&
            ! navigator.userAgent.match(/Blackberry/i) )
    
        // do desktop stuff

     else if ( navigator.userAgent.match(/iPad/i) ) 
    
       // do tablet stuff

    

目前，我只检查 iPad，因为检查“android”似乎有些问题，而且是一个非常广泛的术语。有没有已知的使用JS区分Android平板和手机的方法？

非常感谢， 迈尔斯

【问题讨论】：

所以根据这个问题的 cmets：***.com/questions/5341637/… UA 中有很多包含“移动”的平板电脑。有什么办法可以解决这个问题？

【参考方案1】：

首先 - 改善条件

if (navigator.userAgent.match(/iPad/i))

    // do tablet stuff
 else if(navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i) )

    // do mobile stuff
 else 
    // do desktop stuff

二、添加缺失的关键字：

if (navigator.userAgent.match(/Tablet|iPad/i))

    // do tablet stuff
 else if(navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi/i) )

    // do mobile stuff
 else 
    // do desktop stuff

第三，这是我使用的实际检测脚本：

https://jsfiddle.net/oriadam/ncb4n882/

var
    ua = navigator.userAgent,
    browser = /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrome\W\d/.test(ua) ? 'gc' : /Chromium\W\d/.test(ua) ? 'oc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
    os = /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
    mobile = /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0,
    tablet = /Tablet|iPad/i.test(ua),
    touch = 'ontouchstart' in document.documentElement;

编辑：

请注意，平板电脑和 iPad 被视为 mobile 和 tablet。 请注意，有些笔记本电脑同时具有触控、鼠标和键盘功能。换句话说，一个好的程序员不依赖于touch——相反，它在所有情况下都支持所有三种输入法。

【讨论】：

这仍然准确吗？我不得不从列表中删除 Mobile 以不匹配 iPad。谢谢

@MarioParra 平板电脑和 iPad 都是 mobile 和 tablet

...所以您的意思是...“您需要折扣double check”？

拆分成平板电脑（起初可能只有 iPad）、移动设备和台式机后，我会（在做事之前）然后做一个“纠正”尝试if (type=='phone)，可能还有一些从手机到平板电脑，基于最大（高度，宽度）according to this great table。 （是的，仍然是烟雾测试/决定......但是）

【参考方案2】：

您可以按照这些步骤进行操作

  var isMobile = 
    Android: function () 
        return navigator.userAgent.match(/Android/i);
    ,
    BlackBerry: function () 
        return navigator.userAgent.match(/BlackBerry/i);
    ,
    ios: function () 
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    ,
    Opera: function () 
        return navigator.userAgent.match(/Opera Mini/i);
    ,
    Windows: function () 
        return navigator.userAgent.match(/IEMobile/i);
    ,
    any: function () 
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    
;

if (isMobile.any()) 
    window.location = "#";