ipad在ios13之后useragent改变的问题记录

最新推荐文章于 2024-06-06 17:26:57 发布

jyb123

最新推荐文章于 2024-06-06 17:26:57 发布

阅读量4.4k

点赞数 3

本文链接：https://blog.csdn.net/jyb123/article/details/113938858

版权

苹果在iOS13之后的iPad UserAgent中将'iPad'替换为'Macintosh'，导致平板识别问题。iPad Mini仍显示'iPad'。文中列举了三种解决方案：1) 通过navigator.platform和最大触控点判断；2) 依据图像处理器类型区分；3) 引用swiper组件device.js中的判断方法，并提供了相关参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

苹果ipad在ios13之后，useragent里面关键字眼iPad不再包含转而替换为Macintosh这个单词，但是同款型号的iPad Mini却依然包含ipad关键字。mac桌面系统ua中同样也是Macintosh，这就导致很多根据ipad来判断是否是平板的方法不太正确，部分ua示例所示：

iPad iOS13.5，  
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15  

iPad iOS12.4.6，  
Mozilla/5.0 (iPad; CPU OS 12_4_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1 

iPad Mini iOS13.1.3
Mozilla/5.0 (iPad; CPU iPhone OS 13_1_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1

Mac 
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15

为了准确判断，通过查找资料，总结如下几种解决方案，以备后续查验。

方案一、

iOS13以前navigator.platform返回"iPhone"或"iPad"；iOS13以后的iPad，navigator.platform返回"MacIntel"，相当于Mac，由于目前还没有触摸屏的Mac，所以可以通过最大触控点来区分Mac和iPad的。这个方案并不严谨。来自网上。

/*
  * ipad环境判断更新
  * iOS pre 13 以前以ua作判断，13后以platform及maxTouchPoints做判断
  */
isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))

方案二：

Apple use Intel graphics processors within Macintosh devices. iPad's use Apple's own graphic processors.

苹果在Mac设备上使用的是Intel的图像处理器，ipad上用的是苹果自己的图像处理器。通过图像处理器来区分。

function isIpad() {
  var ua = window.navigator.userAgent
  var IsIPad = false
  if (/ipad/i.test(ua)) {
    IsIPad = true
  }
  // iPad from IOS13
  var macApp = ua.match(/Macintosh/i) != null
  if (macApp) {
    // need to distinguish between Macbook and iPad
    var canvas = document.createElement('canvas')
    if (canvas != null) {
      var context =
        canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
      if (context) {
        var info = context.getExtension('WEBGL_debug_renderer_info')
        if (info) {
          var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL)
          if (renderer.indexOf('Apple') != -1) IsIPad = true
        }
      }
    }
  }
}

方案三：

下面的方案摘自swiper组件的device.js中

  const platform = window.navigator.platform;
  const ua = window.navigator.userAgent;
  let ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
  let macos = platform === 'MacIntel';
  let touch = !!(('ontouchstart' in window) || (window.DocumentTouch && document instanceof window.DocumentTouch))

  // iPadOs 13 fix
  if (!ipad
    && macos
    && touch
    && (
      (screenWidth === 1024 && screenHeight === 1366) // Pro 12.9
      || (screenWidth === 834 && screenHeight === 1194) // Pro 11
      || (screenWidth === 834 && screenHeight === 1112) // Pro 10.5
      || (screenWidth === 768 && screenHeight === 1024) // other
    )
  ) {
    ipad = ua.match(/(Version)\/([\d.]+)/);
    macos = false;
  }

参考：

https://juejin.cn/post/6865658712665620494

https://51degrees.com/blog/missing-ipad-tablet-web-traffic

https://stackoverflow.com/questions/58490952/how-to-test-ios-in-use-from-the-javascript-inside-a-wkwebview-on-ipados-13