我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
当前回答
如果你正在使用React,有一个很棒的库可以解决这类问题:React - agent。(使用ua-parser-js构建。)
https://github.com/medipass/react-ugent
可用的浏览器有:
Chrome, chromium, edge, firefox,即,lynx, safari, opera
可用的操作系统包括:
安卓,黑莓,铬操作系统,debian, ios, linux, MAC操作系统,ubuntu, unix, Windows
可选设备包括:
游戏机、电脑、手机、平板电脑、智能电视、可穿戴、嵌入式
易于使用:
<Ugent browser="safari" os="ios">
<div>
This text only shows on Safari on iOS.
</div>
</Ugent>
如果你不使用React,你可以使用- ua-parser-js
https://github.com/faisalman/ua-parser-js
其他回答
这将变量_iOSDevice设置为true或false
_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
如果你还在尝试检查是否是iOS,我建议你使用以下方法:
创建一个名为helper的文件夹 创建一个名为platform的文件。Ts或platform.js 导出函数isIOS:
export const isIOS = () => {
let platform = navigator?.userAgent || navigator?.platform || 'unknown'
return /iPhone|iPod|iPad/.test(platform)
}
如果是iPhone或iPod或Ipad,结果为真,否则为假。
你可能会问,为什么我需要检查导航器。userAgent || navigator。平台,原因很简单,第二个选项曾经是默认选项,但现在它已弃用,一些浏览器将在未来停止支持它,第一个选项更可靠。
你可以在这里查看我上面提到的反对意见:
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform: ~:文本3 =弃用% % 20这% % 20 20特性是% 20不,% 20保持% 20 % 20兼容性% 20目的。
记录userAgentData、userAgent和平台。
使用下面的函数,我收到了这些日志:
console.log({
userAgentData: navigator?.userAgentData?.platform,
userAgent: navigator?.userAgent,
platform: navigator?.platform,
})
{
"userAgentData": "",
"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
"platform": "MacIntel"
}
我在自己的Macbook电脑上测试了它,它在不同的浏览器和操作系统上都能运行。你可以看到navigator?。useragentdata ?。平台根本不起作用。
我也没有收到任何与我的typescript相关的错误,即使我使用React调用这个函数。
奖金、isAndroid
如果你想知道如何检查是否是Android平台,我建议你不要遵循与isIOS相反的想法:
const isAndroid = !isIOS();
原因很简单,因为桌面将被视为Android平台,所以它将无法工作。 要解决这个问题,你只需要做以下检查:
export const isAndroid = () => {
const ua = navigator.userAgent.toLowerCase() + navigator?.platform.toLowerCase();
const isAndroid = ua.indexOf("android") > -1;
return isAndroid;
}
我们检查导航器的原因。userAgent + navigator?平台支持新旧浏览器。
检测iOS(均<12和13+)
社区维基,因为编辑队列说它是满的,所有其他答案目前是过时或不完整的。
const iOS_1to12 = /iPad|iPhone|iPod/.test(navigator.platform);
const iOS13_iPad = (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));
const iOS1to12quirk = function() {
var audio = new Audio(); // temporary Audio object
audio.volume = 0.5; // has no effect on iOS <= 12
return audio.volume === 1;
};
const isIOS = !window.MSStream && (iOS_1to12 || iOS13_iPad || iOS1to12quirk());
更新:我最初的答案不包括在桌面模式下的iPad(在即将推出的iPadOS 13及更高版本中,默认更改为桌面模式)。 这对我的用例很好,如果不适合你,使用这个更新:
// iPhone and iPad including iPadOS 13+ regardless of desktop mode settings
iOSiPadOS = /^iP/.test(navigator.platform) ||
/^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
这应该是安全的,只要 台式mac电脑根本不支持触摸事件 或不超过4个触摸点(当前iOS设备支持5个触摸点) 这是因为regexp ^首先检查平台字符串的起始位置,如果没有“iP”就停止(无论如何都比搜索长UA字符串直到结束快)。 它比导航仪安全。userAgent检查为导航器。平台不太可能是伪造的 检测iPhone / iPad模拟器
以我之见,这一个速度快,省钱,而且运行良好:
iOS = /^iP/.test(navigator.platform);
// or, if you prefer it verbose:
iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);
var isiOSSafari = (navigator.userAgent. var)match(/like Mac OS X/i)) ?真:假;