JavaScript中怎么判斷前端應(yīng)用運(yùn)行環(huán)境，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)公司主營(yíng)寧德網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,寧德h5微信小程序開(kāi)發(fā)搭建,寧德網(wǎng)站營(yíng)銷推廣歡迎寧德等地區(qū)企業(yè)咨詢

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

在前端應(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ù)呢？

我們打開(kāi)Chrome開(kāi)發(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代碼通過(guò)使用正則表達(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/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) { // 說(shuō)明當(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"; // 說(shuō)明當(dāng)前運(yùn)行在Windows 7 中
                } else if (uaResult[2] > 1) {
                    sVersionStr = "8"; // 說(shuō)明當(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": "" }; // 說(shuō)明當(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>

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么判斷前端應(yīng)用運(yùn)行環(huán)境的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：JavaScript中怎么判斷前端應(yīng)用運(yùn)行環(huán)境
標(biāo)題網(wǎng)址：http://jinyejixie.com/article16/ggssgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、用戶體驗(yàn)、做網(wǎng)站、自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)