如何根据手机的操作系统显示不同的页面？

最初的 H5 页面，入口比较单一，大部分是通过移动设备的浏览器来访问。近年来随着移动设备和技术的发展，现在访问 H5 页面已经从浏览器迁移到了各种 APP 里面，访问方式也从笨拙的『输入网址』变成了『扫码进入』。

这种改变对前端开发提出了一个问题：页面需要根据不同的 APP 或者 OS（operating system，操作系统）来显示不同的内容。

针对这个问题，本文用的解决方案是判断网页的 UA（通过 navigator.userAgent 获得）。下面截取几段 UA 来分析下：

测试手机：

1. 一加5T
2. 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，而微信并没有明显的标识符。