摘要：在前端應(yīng)用里，有時(shí)候我們需要根據(jù)運(yùn)行環(huán)境的不同做出對(duì)應(yīng)處理。另一個(gè)重要的字段為下面這段不到行的代碼通過使用正則表達(dá)式處理對(duì)象中的和字段來(lái)判斷當(dāng)前前端應(yīng)用運(yùn)行的環(huán)境，支持三種操作系統(tǒng)，等移動(dòng)平臺(tái)。執(zhí)行后，會(huì)彈出檢測(cè)出的運(yùn)行環(huán)境和版本號(hào)。

我們部署在某些云平臺(tái)或者Web服務(wù)器上的前端應(yīng)用，既可以用PC端瀏覽器訪問，也可以用手機(jī)上的瀏覽器訪問。

在前端應(yīng)用里，有時(shí)候我們需要根據(jù)運(yùn)行環(huán)境的不同做出對(duì)應(yīng)處理。比如下面這段邏輯，如果判斷出應(yīng)用當(dāng)前是運(yùn)行在手機(jī)上，則需要設(shè)置對(duì)應(yīng)的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");

      }

}

那么如何實(shí)現(xiàn)isMobile函數(shù)呢？

我們打開Chrome開發(fā)者工具，在console標(biāo)簽頁(yè)輸入navigator，回車，會(huì)發(fā)現(xiàn)這個(gè)對(duì)象包含了非常多的有用信息。

其中有個(gè)字段platform: 我如果在安裝了Windows系統(tǒng)的電腦上使用Chrome，該值為Win32。

另一個(gè)重要的字段為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代碼通過使用正則表達(dá)式處理navigator對(duì)象中的platform和userAgent字段來(lái)判斷當(dāng)前前端應(yīng)用運(yùn)行的環(huán)境，支持Windows/Linux/Macintosh三種操作系統(tǒng)，iOS/Android/BlackBerry/Windows Phone等移動(dòng)平臺(tái)。

代碼如下。您也可以在我的github上找到這段代碼。執(zhí)行后，會(huì)彈出檢測(cè)出的運(yùn)行環(huán)境和版本號(hào)。

https://github.com/i042416/Kn...

< 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) { // 說明當(dāng)前是Windows操作系統(tǒng)

            var rVersion = /Windows NT (d+).(d)/i;

            var uaResult = userAgent.match(rVersion);

            var sVersionStr = "";

            if (uaResult[1] == "6") {

                if (uaResult[2] == 1) {

                    sVersionStr = "7"; // 說明當(dāng)前運(yùn)行在Windows 7 中

                } else if (uaResult[2] > 1) {

                    sVersionStr = "8"; // 說明當(dāng)前運(yùn)行在Windows 8 中

                }

            } else {

                sVersionStr = uaResult[1];

            }

            return { "name": OS.WINDOWS, "versionStr": sVersionStr };

        } else if (pf.indexOf("Mac") != -1) {

            return { "name": OS.MACINTOSH, "versionStr": "" }; // Macintosh操作系統(tǒng)

        } else if (pf.indexOf("Linux") != -1) {

            return { "name": OS.LINUX, "versionStr": "" }; // 說明當(dāng)前運(yùn)行在Linux操作系統(tǒng)

        }

        return null;

    }

    platform = /Windows Phone (?:OS )?([d.]*)/; // windows phone的正則表達(dá)式

    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操作系統(tǒng)

        } else if (result[2].match(/Android/)) {

            result[2] = result[2].replace(/s/g, "");

            return ({ "name": OS.ANDROID, "versionStr": result[3] }); // Android操作系統(tǒng)

        } else if (result[0].match(bbDevices)) {

            return ({ "name": OS.BLACKBERRY, "versionStr": result[4] }); // Blackberry

        }

    }

    //Android平臺(tái)上的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的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼: