这可能是一个愚蠢的问题,但是我想使用Modernizr JS库检测一些浏览器属性,以确定要显示或不显示什么内容。
我有一个名为Pano2VR的应用程序,它可以同时输出HTML5和SWF。我需要用于iOS设备用户的HTML5。
但是,IE根本不呈现此“ HTML5”输出。看来他们的输出使用CSS3 3D变换和WebGL,IE9中显然不支持一种或多种。
因此,对于那些用户,我需要显示Flash版本。我打算使用IFRAME,并通过Modernizr脚本或document传递SRC。根据浏览器写出正确的IFRAME代码。
所有这些导致我如何使用Modernizr来仅检测IE或不检测IE?还是检测CSS 3d转换?
还是有其他方法可以做到这一点?
我同意我们应该测试功能,但是很难找到一个简单的答案:“现代浏览器支持哪些功能,而旧浏览器不支持?”
因此,我启动了许多浏览器,并直接检查了Modernizer。我添加了一些我绝对需要的功能,然后添加了“ inputtypes.color”,因为它似乎涵盖了我关心的所有主要浏览器:Chrome,Firefox,Opera,Edge …和IE11。现在,我可以轻轻建议用户使用Chrome / Opera / Firefox / Edge会更好。
这就是我使用的-您可以编辑事物列表以测试您的特定情况。如果缺少任何功能,则返回false。
/** * Check browser capabilities. */ public CheckBrowser(): boolean { let tests = ["csstransforms3d", "canvas", "flexbox", "webgl", "inputtypes.color"]; // Lets see what each browser can do and compare... //console.log("Modernizr", Modernizr); for (let i = 0; i < tests.length; i++) { // if you don't test for nested properties then you can just use // "if (!Modernizr[tests[i]])" instead if (!ObjectUtils.GetProperty(Modernizr, tests[i])) { console.error("Browser Capability missing: " + tests[i]); return false; } } return true; }
这是“ inputtypes.color”所需的GetProperty方法。
/** * Get a property value from the target object specified by name. * * The property name may be a nested property, e.g. "Contact.Address.Code". * * Returns undefined if a property is undefined (an existing property could be null). * If the property exists and has the value undefined then good luck with that. */ public static GetProperty(target: any, propertyName: string): any { if (!(target && propertyName)) { return undefined; } var o = target; propertyName = propertyName.replace(/\[(\w+)\]/g, ".$1"); propertyName = propertyName.replace(/^\./, ""); var a = propertyName.split("."); while (a.length) { var n = a.shift(); if (n in o) { o = o[n]; if (o == null) { return undefined; } } else { return undefined; } } return o; }