我想使用 Modernizr JS 库来检测一些浏览器属性以确定显示或不显示的内容。
我有一个名为Pano2VR的应用程序，它同时输出 HTML5 和 SWF。我需要 iOS 设备用户的 HTML5。
但是，IE 根本不会呈现这个“HTML5”输出。似乎他们的输出使用了 CSS3 3D 转换和 WebGL，IE9 中显然不支持其中一种或多种。
因此，对于那些用户，我需要显示 Flash 版本。我计划使用 IFRAME 并通过 Modernizr 脚本或 document.write 出正确的 IFRAME 代码通过 SRC，具体取决于浏览器。
所有这些都导致我如何使用 Modernizr 来检测简单的 IE 或不检测 IE？或者检测 CSS 3d 转换？
还是有其他方法可以做到这一点？
Modernizr 本身并不会检测浏览器，它会检测存在哪些特性和功能，这就是它试图做的事情的全部内容。
您可以尝试像这样挂钩一个简单的检测脚本，然后使用它来做出选择。我还包括了版本检测，以防万一。如果您只想检查任何版本的 IE，您只需查找值为“MSIE”的 navigator.userAgent。
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
BrowserDetect.init();
document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");然后，您可以简单地检查：
BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;
您可以使用Modernizr通过检查 SVG SMIL动画支持来简单地检测 IE 或非 IE。
如果您在 Modernizr 设置中包含SMIL功能检测，则可以使用简单的 CSS 方法，并将Modernizr 应用于html元素的.no-smil类作为目标：
html.no-smil {
/* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}
或者，您可以将 Modernizr 与简单的 JavaScript 方法一起使用，如下所示：
if ( Modernizr.smil ) {
/* set HTML5 content */
} else {
/* set IE/Edge/Flash content */
}
请记住，IE/Edge 有朝一日可能会支持SMIL，但目前没有计划这样做。
作为参考，这里是caniuse.com上SMIL兼容性图表的链接。
Modernizr可以检测 CSS 3D 变换，是的。的真实性Modernizr.csstransforms3d会告诉你浏览器是否支持它们。
上面的链接允许您选择要包含在 Modernizr 构建中的测试，并且您正在寻找的选项在那里可用。
或者，正如 user356990 回答的那样，如果您只搜索 IE 和 IE，则可以使用条件注释。<html>您可以使用 HTML5 Boilerplate 的条件注释技巧来分配一个类，而不是创建一个全局变量：
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
如果你已经初始化了 jQuery，你可以用$('html').hasClass('lt-ie9'). 如果您需要检查您所在的 IE 版本以便有条件地加载 jQuery 1.x 或 2.x，您可以执行以下操作：
myChecks.ltIE9 = (function(){
var htmlElemClasses = document.querySelector('html').className.split(' ');
if (!htmlElemClasses){return false;}
for (var i = 0; i < htmlElemClasses.length; i += 1 ){
var klass = htmlElemClasses[i];
if (klass === 'lt-ie9'){
return true;
}
}
return false;
}());
注意 IE 条件注释仅支持 IE9（含 IE9）。从 IE10 开始，微软鼓励使用功能检测而不是浏览器检测。
无论您选择哪种方法，您都可以使用
if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
// iframe or flash fallback
}
当然，不要||从字面上理解。
如果您正在寻找 html5 样板文件的 JS 版本（结合使用特征检测和 UA 嗅探）：
var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}
好吧，在对这个主题进行了更多研究之后，我最终使用了以下针对 IE 10+ 的解决方案。由于 IE10&11 是唯一支持 -ms-high-contrast 媒体查询的浏览器，因此无需任何 JS，这是一个不错的选择：
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
完美运行。
CSS 技巧有一个很好的针对 IE 11 的解决方案：
http://css-tricks.com/ie-10-specific-styles/
.NET 和 Trident/7.0 是 IE 独有的，因此可用于检测 IE 版本 11。
然后代码将用户代理字符串添加到具有属性“data-useragent”的 html 标记中，因此可以专门针对 IE 11...
我需要检测 IE 与大多数其他东西，我不想依赖 UA 字符串。我发现es6number与 Modernizr 一起使用正是我想要的。我不太担心这种变化，因为我不希望 IE 支持 ES6 Number。所以现在我知道任何版本的 IE 与 Edge/Chrome/Firefox/Opera/Safari 之间的区别。
更多细节在这里：http ://caniuse.com/#feat=es6-number
请注意，我并不真正关心 Opera Mini 的误报。你可能是。
我同意我们应该测试功能，但是很难找到一个简单的答案来回答“'现代浏览器'支持哪些功能而不是'旧浏览器'？”
所以我启动了一堆浏览器并直接检查了 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;
}
您可以使用< !-- [if IE] >
hack 设置一个全局 js 变量，然后在您的普通 js 代码中进行测试。有点难看，但对我来说效果很好。