我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
当前回答
因为导航器。平台已弃用,最好不再使用,我想添加一个其他解决方案。
你可以通过检查navigator.vendor来过滤MacOS系统。 当结果是苹果电脑公司,你知道它是MacOS。
其他回答
我在几年前写过这个,但我相信它仍然有效:
if(navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPhone/i) || (navigator.userAgent.match(/iPod/i)))
{
alert("Ipod or Iphone");
}
else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPad/i))
{
alert("Ipad");
}
else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.indexOf('Safari') != -1)
{
alert("Safari");
}
else if (navigator.vendor == null || navigator.vendor != null)
{
alert("Not Apple Based Browser");
}
如果你还在尝试检查是否是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?平台支持新旧浏览器。
如果您正在使用Modernizr,您可以为它添加一个自定义测试。
决定使用哪种检测模式并不重要(userAgent, navigator。Vendor或navigator.platform),您总是可以将其打包以便稍后使用。
//Add Modernizr test
Modernizr.addTest('isios', function() {
return navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
});
//usage
if (Modernizr.isios) {
//this adds ios class to body
Modernizr.prefixed('ios');
} else {
//this adds notios class to body
Modernizr.prefixed('notios');
}
如果你正在使用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
在我的案例中,用户代理不够好,因为Ipad中的用户代理与Mac OS中的用户代理相同,因此我不得不做一个讨厌的把戏:
var mql = window.matchMedia("(orientation: landscape)");
/**
* If we are in landscape but the height is bigger than width
*/
if(mql.matches && window.screen.height > window.screen.width) {
// IOS
} else {
// Mac OS
}