@nuxtjs/device 无法判断设备是 iPad

原创于 2021-12-09 10:25:41 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ipad #ios #前端

Nuxt 同时被 2 个专栏收录

1 篇文章

订阅专栏

Nuxt 报错

1 篇文章

订阅专栏

在新款iPad上，使用@nuxtjs/device库的$device.isDesktop方法会返回true，因为设备默认开启桌面模式，修改了userAgent。解决办法包括用户手动关闭桌面模式或调整检测方式，例如通过尝试创建TouchEvent来判断是否为移动设备。

问题： 在较新的 iPad (iPad9) 上面，使用 @nuxtjs/device 提供的 $device.isDesktop，返回 true。

原因： iPad 默认开启了桌面模式，即会修改 userAgent ,来获取桌面版的网页。

// 默认
console.log(navigator.userAgent);
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15

// 关闭桌面模式
console.log(navigator.userAgent);
// Mozilla/5.0 (iPad; CPU OS 15_0_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1

解决：

一、关闭桌面模式

设置路径：设置 > Safari浏览器 > 请求桌面网站

iPad 设置

二、修改判断方式

function isMobile() {
  try {
    document.createEvent("TouchEvent"); return true;
  } catch(e) {
    return false; 
  }
}

参考