我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
我想知道是否有可能检测浏览器是否运行在iOS上,类似于你如何使用Modernizr进行功能检测(尽管这显然是设备检测而不是功能检测)。
通常情况下,我会倾向于功能检测,但我需要找出设备是否是iOS,因为他们处理视频的方式根据这个问题,YouTube API不适用于iPad / iPhone /非flash设备
当前回答
在我的案例中,用户代理不够好,因为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
}
其他回答
为了检测iOS版本,我们必须像这样用Javascript代码解构用户代理:
var res = navigator.userAgent.match(/; CPU.*OS (\d_\d)/);
if(res) {
var strVer = res[res.length-1];
strVer = strVer.replace("_", ".");
version = strVer * 1;
}
在添加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上的视频(我在这种情况下实际做的是显示一个可供选择的图像,点击播放视频-我只是不想显示默认的视频播放器和播放按钮)。
我在几年前写过这个,但我相信它仍然有效:
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");
}
var isiOSSafari = (navigator.userAgent. var)match(/like Mac OS X/i)) ?真:假;
可能值得回答的是,运行iOS 13的ipad将有导航器。平台设置为MacIntel,这意味着你需要找到另一种方法来检测iPadOS设备。