如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

￡神魔★判官ぃ 2022-01-13 13:09 477阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

我们部署在某些云平台或者Web服务器上的前端应用，既可以用PC端浏览器访问，也可以用手机上的浏览器访问。

在前端应用里，有时候我们需要根据运行环境的不同做出对应处理。比如下面这段逻辑，如果判断出应用当前是运行在手机上，则需要设置对应的viewport。

![1240][]

if (this.isMobile()) {
    
         var viewport = document.querySelector("meta[name=viewport]");
    
         if (viewport) {
    
               viewport.setAttribute('content', 'width = ' + window.innerWidth + ', height = ' + window.innerHeight + ', maximum-scale = 1.25, minimum-scale = 1.25');
    
          }
    
    }

![1240 1][]

那么如何实现isMobile函数呢？

我们打开Chrome开发者工具，在console标签页输入navigator，回车，会发现这个对象包含了非常多的有用信息。

![1240 2][]

其中有个字段platform: 我如果在安装了Windows系统的电脑上使用Chrome，该值为Win32。

![1240 3][]

另一个重要的字段为userAgent：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

下面这段不到100行的JavaScript代码通过使用正则表达式处理navigator对象中的platform和userAgent字段来判断当前前端应用运行的环境，支持Windows/Linux/Macintosh三种操作系统，iOS/Android/BlackBerry/Windows Phone等移动平台。

代码如下。您也可以在我的github上找到这段代码。执行后，会弹出检测出的运行环境和版本号。

[https://github.com/i042416/KnowlegeRepository/blob/master/practice/264\_getOS.html][https_github.com_i042416_KnowlegeRepository_blob_master_practice_264_getOS.html]

![1240 4][]

![1240 5][]

< html >
    
        <
        script >
    
        var OS = {
    
            "WINDOWS": "win",
    
            "MACINTOSH": "mac",
    
            "LINUX": "linux",
    
            "IOS": "iOS",
    
            "ANDROID": "Android",
    
            "BLACKBERRY": "bb",
    
            "WINDOWS_PHONE": "winphone"
    
        };
    
    var result = getOS();
    
    alert(JSON.stringify(result));
    
    function getOS() {
    
        var userAgent = navigator.userAgent;
    
        var platform, result;
    
        function getDesktopOS() {
    
            var pf = navigator.platform;
    
            if (pf.indexOf("Win") != -1) { // 说明当前是Windows操作系统
    
                var rVersion = /Windows NT (d+).(d)/i;
    
                var uaResult = userAgent.match(rVersion);
    
                var sVersionStr = "";
    
                if (uaResult[1] == "6") {
    
                    if (uaResult[2] == 1) {
    
                        sVersionStr = "7"; // 说明当前运行在Windows 7 中
    
                    } else if (uaResult[2] > 1) {
    
                        sVersionStr = "8"; // 说明当前运行在Windows 8 中
    
                    }
    
                } else {
    
                    sVersionStr = uaResult[1];
    
                }
    
                return { "name": OS.WINDOWS, "versionStr": sVersionStr };
    
            } else if (pf.indexOf("Mac") != -1) {
    
                return { "name": OS.MACINTOSH, "versionStr": "" }; // Macintosh操作系统
    
            } else if (pf.indexOf("Linux") != -1) {
    
                return { "name": OS.LINUX, "versionStr": "" }; // 说明当前运行在Linux操作系统
    
            }
    
            return null;
    
        }
    
        platform = /Windows Phone (?:OS )?([d.]*)/; // windows phone的正则表达式
    
        result = userAgent.match(platform);
    
        if (result) {
    
            return ({ "name": OS.WINDOWS_PHONE, "versionStr": result[1] });
    
        }
    
        // BlackBerry 10
    
        if (userAgent.indexOf("(BB10;") > 0) {
    
            platform = /sVersion/ ([d.] + ) s / ; // BlackBerry的regular expression
    
            result = userAgent.match(platform);
    
            if (result) {
    
                return { "name": OS.BLACKBERRY, "versionStr": result[1] };
    
            } else {
    
                return { "name": OS.BLACKBERRY, "versionStr": '10' };
    
            }
    
        }
    
        // iOS, Android, BlackBerry 6.0+:
    
        platform = /(([a-zA-Z ]+);s(?:[U]?[;]?)([D]+)((?:[d._]*))(?:.*[)][^d]*)([d.]*)s/;
    
        result = userAgent.match(platform);
    
        if (result) {
    
            var appleDevices = /iPhone|iPad|iPod/;
    
            var bbDevices = /PlayBook|BlackBerry/;
    
            if (result[0].match(appleDevices)) {
    
                result[3] = result[3].replace(/_/g, ".");
    
                return ({ "name": OS.IOS, "versionStr": result[3] }); // iOS操作系统
    
            } else if (result[2].match(/Android/)) {
    
                result[2] = result[2].replace(/s/g, "");
    
                return ({ "name": OS.ANDROID, "versionStr": result[3] }); // Android操作系统
    
            } else if (result[0].match(bbDevices)) {
    
                return ({ "name": OS.BLACKBERRY, "versionStr": result[4] }); // Blackberry
    
            }
    
        }
    
        //Android平台上的Firefox浏览器
    
        platform = /((Android)[s]?([d][.d]*)?;.*Firefox/ [d][.d] * /;
    
        result = userAgent.match(platform);
    
        if (result) {
    
            return ({ "name": OS.ANDROID, "versionStr": result.length == 3 ? result[2] : "" });
    
        }
    
        // Desktop
    
        return getDesktopOS();
    
    }
    
    <
    /script>
    
    <
    /html>

![1240 6][]

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: ![1240 7][]

![1240 8][]

转载于:https://my.oschina.net/u/3771578/blog/2250129

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/39c69898e4f4441693777e07023a4bdb.png
[1240]: /images/20220113/10d25615d901422aa79e02bf18b0f3cd.png
[1240 1]: /images/20220113/17cff40435f0469ea7316ac4daa63c51.png
[1240 2]: /images/20220113/1eb24042cd3441e089d2d116c50a3c45.png
[1240 3]: /images/20220113/d1b903153a4344b99fe3b09cca238a77.png
[https_github.com_i042416_KnowlegeRepository_blob_master_practice_264_getOS.html]: https://github.com/i042416/KnowlegeRepository/blob/master/practice/264_getOS.html
[1240 4]: /images/20220113/dc21cd8934614e65b77e3a64ed29482c.png
[1240 5]: /images/20220113/714ee9409bfa4d9891a7c05048e9a31e.png
[1240 6]: /images/20220113/528c31cef9994ecd801180aecf585e95.png
[1240 7]: /images/20220113/077d8f8576c9489f97fb7936f471b4aa.png
[1240 8]: /images/20220113/7ecfe8f31a6d48a785eac23ea2825c1c.png