前端开发中IOS设备判断踩坑

前言

我们在前端开发中，会遇到一些判断设备类型的问题，比如判断是否是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，但是依旧支持触控，所以我们能够通过这个条件来进行判断。