我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
当前回答
var isiOSSafari = (navigator.userAgent. var)match(/like Mac OS X/i)) ?真:假;
其他回答
你也可以使用include
const isApple = ['iPhone', 'iPad', 'iPod', 'iPad Simulator', 'iPhone Simulator', 'iPod Simulator',].includes(navigator.platform)
在iOS 13之后,你应该像这样检测iOS设备,因为iPad将不会被旧的方式检测为iOS设备(由于新的“桌面”选项,默认启用):
let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
第一个条件适用于iOS < 13或禁用桌面模式的iPhone或iPad,第二个条件适用于默认配置的iPadOS 13,因为它将自己定位为Macintosh Intel,但实际上是唯一具有多点触摸的Macintosh。
与其说是一种破解,不如说是一种真正的解决方案,但对我来说很可靠
P.S.如前所述,你可能应该添加IE检查
let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream
没有必要测试导航器。userAgent或navigator.platform:
const isIOS = typeof navigator.standalone === 'boolean';
导航器。standalone只在iOS Safari上设置。参见MDN, Safari HTML参考。
在添加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上的视频(我在这种情况下实际做的是显示一个可供选择的图像,点击播放视频-我只是不想显示默认的视频播放器和播放按钮)。
如果您正在使用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');
}