如何用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上找到這段程式碼。執行後,會彈出檢測出的執行環境和版本號。
< 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的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2212806/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript執行環境與執行棧JavaScript
- 而井教你判斷當前Javascript執行環境是否支援async函式JavaScript函式
- JavaScript執行環境及作用域JavaScript
- 詳細判斷瀏覽器執行環境(可能是最全的判斷,值得一看)瀏覽器
- 判斷環境使用 Laravel Page SpeedLaravel
- 搭建軟體執行平臺以及IDE環境IDE
- 1-1 JavaScript執行環境 執行棧JavaScript
- Linux 應用程式處理當前執行環境的環境變數(轉)Linux變數
- 跨平臺的.NET執行環境 Mono 3.2.7釋出!Mono
- Linux 平臺七大桌面環境通覽Linux
- meteor 檢測執行環境,手機或者桌面
- C#移動跨平臺開發(1)環境準備C#
- 使用 WebSphere CloudBurst 進行應用程式環境遷移(一)WebCloud
- 使用 WebSphere CloudBurst 進行應用程式環境遷移(二)WebCloud
- 用Docker打包Python執行環境DockerPython
- Java執行環境配置Java
- 使用 JavaScript 開發AR(擴增實境)移動應用的預備知識和環境搭建JavaScript
- 如何用 pipenv 克隆 Python 教程程式碼執行環境?Python
- 【Fireyer】一款Android平臺環境檢測應用Android
- 結合 Shell 對 Koa 應用執行環境檢查
- 使用 ARChon 執行時環境在 Ubuntu 上執行 Android 應用UbuntuAndroid
- 重磅升級| 麟卓卓懿移動應用相容執行環境8.0預覽版釋出
- SAP雲平臺執行環境Cloud Foundry和Neo的區別Cloud
- 淺談公司java開發執行環境搭建(ubuntu環境)JavaUbuntu
- linux登入bash shell環境執行環境變數Linux變數
- 雲平臺雲環境之要素
- Linux Shell 判斷環境變數 是否存在Linux變數
- js執行環境總結JS
- 【譯】JS執行時環境JS
- laradock swoole 執行環境
- Scala--執行環境搭建
- 執行環境和作用域
- 執行環境及作用域
- linux執行環境&命令Linux
- 搭建go環境並執行Go
- openGauss-執行環境
- 大資料執行環境的執行大資料
- 遠端應用技術與虛擬桌面工作環境