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

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

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

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');

      }

}

那么如何实现isMobile函数呢?

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

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

另一个重要的字段为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

< 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>

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏高性能服务器开发

windows完成端口(六)

系列目录 windows完成端口(一) windows完成端口(二) windows完成端口(三) windows完成端口(四) windows完成端口(五) ...

3294
来自专栏Golang语言社区

写在学习golang一个月后

连接池。由于PHP没有连接池,当高并发时就会有大量的数据库连接直接冲击到MySQL上,最终导致数据库挂掉。虽然Swoole有连接池,但是Swoole只是PHP的...

2252
来自专栏一个会写诗的程序员的博客

《Springboot极简教程》问题解决:Idea解决Gradle库依赖冲突问题:Detected both log4j-over-slf4j.jar AND slf4j-log4j12.jar on

参考: https://docs.gradle.org/current/userguide/userguide_single.html#sec:listing...

873
来自专栏24K纯开源

OpenProcess打开进程返回错误的问题

问题描述       项目中需要做一个小功能:能够查看系统中当前正在运行的进程的内存信息,如内存块类型、分配状态、访问权限等。如下图所示: ?       需要...

36510
来自专栏更流畅、简洁的软件开发方式

多种数据库的情况

1、 DAL并不是放在一个DLL里面,而是分别放在各个的DLL里面,需要哪个数据库就使用哪个DLL文件。 2、 DAL里面的命名空间、类名、参数类型都是一样的,...

2467
来自专栏恰同学骚年

.NET Core微服务之基于IdentityServer建立授权与验证服务(续)

上一篇我们基于IdentityServer4建立了一个AuthorizationServer,并且继承了QuickStartUI,能够成功获取Token了。这一...

2355
来自专栏一只程序汪的自我修养

手把手教你用.NET Core写爬虫

自从上一个项目58HouseSearch从.NET迁移到.NET core之后,磕磕碰碰磨蹭了一个月才正式上线到新版本。

31512
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十三天 Web商城实战三【悟空教程】

<a href="${pageContext.request.contextPath}/OrderServlet?method=findByUid">我的订单<...

1591
来自专栏编程坑太多

python3爬电影天堂

1627
来自专栏移动端开发

iOS 测试三方 KIF 的那些事

一: KIF 三方库的配置       今天的广州天气还不错,原本想试试UI测试的,前几天也了解到很多公司都在用 KIF 这这三方框架!!今天也就试着做做,可就...

2276

扫码关注云+社区