我們部署在某些云平臺或者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 10if (userAgent.indexOf("(BB10;") > 0) {platform = /sVersion/ ([d.] + ) s / ; // BlackBerry的regular expressionresult = 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] : "" });}// Desktopreturn getDesktopOS();}< /script>< /html>

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。