我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
当前回答
这将变量_iOSDevice设置为true或false
_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
其他回答
var isiOSSafari = (navigator.userAgent. var)match(/like Mac OS X/i)) ?真:假;
在添加Modernizr测试时,只要有可能,您应该添加针对某个特性的测试,而不是针对某个设备或操作系统。如果需要的话,为iPhone添加10个测试并没有什么错。有些东西就是不能被特征检测到。
Modernizr.addTest('inpagevideo', function ()
{
return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
});
例如,在iPhone(不是iPad)上,视频不能在网页上内联播放,它会全屏打开。所以我创建了一个测试" no-inpage-video "
然后你可以在css中使用它(Modernizr添加类.no-inpagevideo到<html>标签如果测试失败)
.no-inpagevideo video.product-video
{
display: none;
}
这将隐藏iPhone上的视频(我在这种情况下实际做的是显示一个可供选择的图像,点击播放视频-我只是不想显示默认的视频播放器和播放按钮)。
如果你还在尝试检查是否是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?平台支持新旧浏览器。
因为导航器。平台已弃用,最好不再使用,我想添加一个其他解决方案。
你可以通过检查navigator.vendor来过滤MacOS系统。 当结果是苹果电脑公司,你知道它是MacOS。
iOS设备上的用户代理会显示iPhone或iPad。我只是根据这些关键词进行筛选。