User-Agent如何判断识别iPad设备

User-Agent如何判断识别iPad设备

UA识别安卓设备,识别Win桌面端,识别iPhone都特容易,但是识别iPad却很难,搜集网上相关资料大部分还是过时的。

这里总结几点为什么难:

1.现在的iPad设备访问任何页面都是电脑UA

2.这个UA与其家Mac产品的UA是一模一样,甚至不给你多一点多余的标识符

3.Mac上的safari和iPad上的safari相差无几,UA里显示的版本号也可以说没有太大差别

4.现在的iPad和MacBook屏幕尺寸是越来越接近(特别是iPad Pro和MacBook),无法从JS里获取屏幕比例去区分iPad

5.自2010年第一台iPad发布至今,已有20多台不同规格的iPad已发售,iPad iPadAir iPadMini iPadPro各系列尺寸相差很大,单独凭每台屏幕尺寸去判断是否为iPad的话,数据太多要统计,还要考虑以后发售的新iPad可能还会有新尺寸,显然也不合适

自WWDC2019大会iPad OS系统面世后,iPad的自带浏览器Safari现在访问任何网页,”请求桌面网站”是默认打开了,UA里不带iPad字样,可以说UA无法下手,屏幕尺寸去判断也是非常牵强,就没有别的办法了吗?

有的。

function isiPad() {
    return (/macintosh|mac os x/i.test(navigator.userAgent) && window.screen.height > window.screen.width && !navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/)) || navigator.userAgent.match(/(iPad).*OS\s([\d_]+)/);
}

以上这段代码就可以完美判断出当前设备是否为iPad,成功率99%以上

利用到了iPad的一个特性来判断

1.iPad的屏幕高始终>屏幕宽(不管你将屏幕竖着还是横着),而Mac的宽>高

 

iPad 的UA和 屏幕高 宽

 

MacBook的UA和屏幕高 宽

以上这个特性用代码写出就是

/macintosh|mac os x/i.test(navigator.userAgent) && window.screen.height > window.screen.width

至于为什么后面要加

!navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/))

是因为要剔除开了”请求桌面网站”的iPhone(iPhone符合了屏幕高>宽 且 开了请求桌面网站后UA里也携带了mac os)

最后再加上对老系统的iPad的判断,老系统iPad的UA里都有iPad标识符

navigator.userAgent.match(/(iPad).*OS\s([\d_]+)/)

至于为什么说成功率只有99%,不是100%

因为这个判断有一种究极的可复现的BUG:

用着MacBook 并且买了一个可以竖置的显示器 并且将显示器竖着浏览你的网页
这样UA不仅包含了”mac os”  而且屏高还>屏宽,但是这种情况我相信很少。。。微乎其微

 


参考链接:https://blog.csdn.net/weixin_30336075/article/details/112163854

发表评论

邮箱地址不会被公开。 必填项已用*标注