最初的 H5 页面，入口比较单一，大部分是通过移动设备的浏览器来访问。近年来随着移动设备和技术的发展，现在访问 H5 页面已经从浏览器迁移到了各种 APP 里面，访问方式也从笨拙的『输入网址』变成了『扫码进入』。
这种改变对前端开发提出了一个问题：页面需要根据不同的 APP 或者 OS（operating system，操作系统）来显示不同的内容。
针对这个问题，本文用的解决方案是判断网页的 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 我们能获得操作系统和网络环境。但是若要准确判断用于扫码的 APP，则不能很准确，例如支付宝有关键字 Alipay，而微信并没有明显的标识符。
网友评论