JavaScript 如何检查移动/平板电脑的用户代理 [英] JavaScript how to check User Agent for Mobile/Tablet

问题描述

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

I'm currently developing some JS work for a clients website which has different functionality across desktop and tablet platforms. Consider:

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"似乎有些问题，而且是一个非常宽泛的术语.是否有一种已知的方法来区分 Android 平板电脑和平板电脑?移动端使用 JS?

Currently, I'm only checking for iPad as checking for "android" seems somewhat problematic, and is a very broad term. Is there a known method for distinguishing between Android tablet & mobile using JS?

非常感谢，迈尔斯

推荐答案

第一——改善条件

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|CrMo/|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' : /MSIEsd/.test(ua) ? 'ie?' : /rv:11/.test(ua) ? 'ie11' : /FirefoxWd/.test(ua) ? 'ff' : /ChromeWd/.test(ua) ? 'gc' : /ChromiumWd/.test(ua) ? 'oc' : /SafariWd/.test(ua) ? 'sa' : /OperaWd/.test(ua) ? 'op' : /OPRWd/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|CrMo/|Opera Mobi/i.test(ua) ? 1 : 0,
    tablet = /Tablet|iPad/i.test(ua),
    touch = 'ontouchstart' in document.documentElement;

请注意，平板电脑和 iPad 被视为 mobile 和 tablet.请注意，有触摸、鼠标和键盘的笔记本电脑.换句话说，一个好的程序员不依赖于touch——而是在所有情况下都支持所有三种输入法.

Note that tablets and iPads are considered both mobile and tablet. Note that there are laptops with both touch, mouse and keyboard. In other words a good programmer does not depend on touch - instead it support all three input methods in all cases.

这篇关于JavaScript 如何检查移动/平板电脑的用户代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！