javascript - 如何在 iOS 13 上的 Safari 中检测设备名称,同时它不显示正确的用户代理?

标签 javascript ios safari user-agent ios13

Apple iOS 13 发布后,我意识到 iPad iOS 13 上 Safari 中的 window.navigator.userAgent 与 MacOS 上的相同。像这样的事情:

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

如您所见,这是一个错误的 iPad 用户代理,并且无法检测当前设备是否是 iDevice。

<小时/>

经过初步研究,我找到了解决方法:

Go to Settings -> Safari -> Request Desktop Website -> All websites. You notice "All websites" is enabled by default. If you disable it and get window.navigator.userAgent the correct user agent is now displayed.

但我不能要求每个用户为每个设备进行此设置更改。因此,我尝试寻找另一种方法,最终编写了以下代码来检查它是否是 Safari、macOS 和触摸屏,然后该设备应该是苹果移动设备,但我想知道的是有没有更好的建议/方法来检测 Safari iOS 13 中正确的设备名称?

detectOs = function(){
   //returns OS name, like "mac"
};

//is Safari on an apple touch-screen device
isSafariInIdevice = function(){
   if (/Safari[\/\s](\d+\.\d+)/.test(windows.navigator.userAgent)) {
      return 'ontouchstart' in window && detectOs() === "mac";      
   }
   return false;
};

最佳答案

确实,虽然“设置”中的选项更改对于用户来说可能是一个很好的解决方案,但作为开发人员,您不能依赖它。这就像要求用户不要使用深色模式一样奇怪,因为您的应用不支持它,而不是使用 plist 选择退出。

对我来说,现在检测 iOS/iPad OS 设备最简单的方法:

const isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

第一个条件是老式的,适用于以前的版本, 而第二个条件适用于 iPad OS 13,它现在将自己标识为:

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

我所知道的所有平台检测器都没有检测到它(目前)无论是移动设备还是桌面设备。

因此,由于 iPad OS 现在称自己为 Macintosh,但真正的 Mac 没有多点触控支持,因此该解决方案非常适合检测 iPad OS 设备,这些设备是现有的唯一多点触控“Macintosh”设备。

附注 另外,您可能需要增强此检查,以排除 IE 被检测为 iOS 设备

const isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
  !window.MSStream

关于javascript - 如何在 iOS 13 上的 Safari 中检测设备名称,同时它不显示正确的用户代理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58019463/

相关文章:

ios - 如何在泛型类中使用类类型

javascript - Safari Extension 可以对新标签页的创建使用react吗?

javascript - 向左和向右循环遍历as3中的向量

JavaScript 包装未包装的纯文本

javascript - 在 Storybook 中全局隐藏插件选项卡

javascript - 用 Javascript 将图像绘制到 Canvas 上

ios - 如何使用WEBRTC最新框架<Anakros/WebRTC>中videoview显示localstream的方法? - 用于 webrtc 框架(iOS)

ios - Telerik AppBuilder : How can we create tab based application using NativeScript

html - Safari 10 溢出 + 倾斜错误

css - Safari + jQuery thickbox = 巨大的视觉故障?