最初的 H5 頁面拘鞋,入口比較單一,大部分是通過移動設備的瀏覽器來訪問矢门。近年來隨著移動設備和技術的發(fā)展盆色,現在訪問 H5 頁面已經從瀏覽器遷移到了各種 APP 里面,訪問方式也從笨拙的『輸入網址』變成了『掃碼進入』祟剔。
這種改變對前端開發(fā)提出了一個問題:頁面需要根據不同的 APP 或者 OS(operating system隔躲,操作系統(tǒng))來顯示不同的內容。
針對這個問題物延,本文用的解決方案是判斷網頁的 UA(通過 navigator.userAgent
獲得)宣旱。下面截取幾段 UA 來分析下:
測試手機:
- 一加5T
- iPhone X
1. 通過 Android 微信 掃碼進入頁面
Mozilla/5.0 (Linux; Android 9; ONEPLUS A5010 Build/PKQ1.180716.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044807 Mobile Safari/537.36 MMWEBID/1132 MicroMessenger/7.0.6.1460(0x27000634) Process/tools NetType/WIFI Language/zh_CN
2. 通過 Android 支付寶 掃碼進入頁面
Mozilla/5.0 (Linux; U; Android 9; zh-CN; ONEPLUS A5010 Build/PKQ1.180716.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/69.0.3497.100 UWS/3.18.0.54 Mobile Safari/537.36 UCBS/3.18.0.54_190719203139 ChannelId(156) NebulaSDK/1.8.100112 Nebula AlipayDefined(nt:WIFI,ws:411|0|2.625) AliApp(AP/10.1.70.8308) AlipayClient/10.1.70.8308 Language/zh-Hans useStatusBar/true isConcaveScreen/false Region/CN
3. 通過 iOS 微信 掃碼進入頁面
TODO 待補充
4. 通過 iOS 支付寶 掃碼進入頁面
TODO 待補充
留意加粗的幾個參數,通過分析 UA 我們能獲得操作系統(tǒng)和網絡環(huán)境叛薯。但是若要準確判斷用于掃碼的 APP浑吟,則不能很準確,例如支付寶有關鍵字 Alipay
耗溜,而微信并沒有明顯的標識符组力。