判断 H5 是否运行在 iOS 或 Android 平台
在开发 Web 应用程序时，有时我们需要根据用户所使用的设备不同而进行不同的处理，比如根据用户的操作系统显示不同的功能或者界面。在移动端开发中，最常见的操作系统就是 iOS 和 Android。本文将介绍如何通过判断 H5 运行在 iOS 还是 Android 平台来做出相应的处理。
方法一：通过 userAgent 判断
在浏览器的 userAgent 中包含了大量关于用户代理的信息，我们可以通过查看 userAgent 来判断用户使用的操作系统。
```javascript
// 获取 userAgent
var userAgent = navigator.userAgent;
// 判断是否为 iOS
if(userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
console.log('iOS');
}
// 判断是否为 Android
if(userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1){
console.log('Android');
}
通过以上代码，我们可以判断用户当前所使用的操作系统是 iOS 还是 Android。
方法二：通过浏览器的 vendor 属性判断
除了通过 userAgent 判断外，我们还可以通过浏览器的 vendor 属性来判断用户所使用的操作系统。
```javascript
// 获取 vendor
var vendor = navigator.vendor;
// 判断是否为 iOS
if(vendor.indexOf('Apple') > -1){
console.log('iOS');
}
// 判断是否为 Android
if(vendor.indexOf('Google') > -1){
console.log('Android');
}
通过以上代码，我们同样可以判断用户当前所使用的操作系统是 iOS 还是 Android。
类图
下面是一个简单的类图，展示了通过 userAgent 和 vendor 判断用户操作系统的类关系：
classDiagram
class UserAgent{
userAgent: String
matchiOS(): Boolean
matchAndroid(): Boolean
}
class Vendor{
vendor: String
matchiOS(): Boolean
matchAndroid(): Boolean
}
UserAgent --> Vendor
状态图
下面是一个简单的状态图，展示了通过 userAgent 和 vendor 判断用户操作系统的状态流程：
stateDiagram
[*] --> CheckUserAgent
CheckUserAgent -->|iOS| ShowiOSFeature
CheckUserAgent -->|Android| ShowAndroidFeature
ShowiOSFeature --> [*]
ShowAndroidFeature --> [*]
通过以上方法，我们可以准确地判断用户当前所使用的操作系统是 iOS 还是 Android，从而根据不同的操作系统做出相应的处理。这在开发移动端 Web 应用程序时非常有用，可以提升用户体验和功能的兼容性。希望本文对您有所帮助！
