前端正确判断 iOS 与 iPadOS：User Agent、MacIntel 和触控点

问题背景

我们在前端开发中，会遇到一些判断设备类型的问题，比如判断是否是iOS设备，判断是否是安卓设备等等。

判断方法

以前一般只会对浏览器的ua进行判断，比如下面代码

1	/iPhone\|iPad\|iPod/i.test(navigator.userAgent);

但是在现在的新ipad上你会发现，很多时候没有将ipad识别为一个iOS设备，而是将其识别成了MAC设备。这是因为iPad OS 13+ 会把 UA 改成 MacIntel，这里就看个人需求了，如果对ipad要求不高的就无所谓

我们可以用下面方法去判断

function getDeviceType(): 'Android' | 'iOS' | 'unknown' {
    const ua = navigator.userAgent || navigator.vendor || (window as any).opera;
    const platform = (navigator as any).platform;
    const maxTouchPoints = navigator.maxTouchPoints;
    if (/Android/i.test(ua)) return 'Android';
    if (/iPad|iPhone|iPod/.test(ua)) return 'iOS';
    if (platform === 'MacIntel' && maxTouchPoints > 1) return 'iOS';
    return 'unknown';
}

因为iPad OS 13+ 虽然会把 UA 改成 MacIntel，但是依旧支持触控，所以我们能够通过这个条件来进行判断。