Modernizr를 사용하여 IE를 감지하는 올바른 방법?
이것은 어리석은 질문 일 수 있지만 Modernizr JS 라이브러리를 사용하여 일부 브라우저 속성을 감지하여 표시하거나 표시하지 않을 콘텐츠를 결정하고 싶었습니다.
HTML5와 SWF를 모두 출력하는 Pano2VR 이라는 앱이 있습니다 . iOS 기기 사용자를위한 HTML5가 필요합니다.
그러나 IE는이 "HTML5"출력을 전혀 렌더링하지 않습니다. 그들의 출력은 CSS3 3D 변환과 WebGL을 사용하는 것 같습니다. 하나 이상은 IE9에서 지원되지 않는 것 같습니다.
따라서 이러한 사용자를 위해 Flash 버전을 표시해야합니다. IFRAME을 사용하고 Modernizr 스크립트를 통해 SRC를 전달하거나 브라우저에 따라 올바른 IFRAME 코드를 작성하십시오.
이 모든 것이 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를 검색 할 수 있습니다 .
If you've included SMIL feature detection in your Modernizr setup, you can use a simple CSS approach, and target the .no-smil class that Modernizr applies to the html element:
html.no-smil {
/* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}
Alternatively, you could use Modernizr with a simple JavaScript approach, like so:
if ( Modernizr.smil ) {
/* set HTML5 content */
} else {
/* set IE/Edge/Flash content */
}
Bear in mind, IE/Edge might someday support SMIL, but there are currently no plans to do so.
For reference, here's a link to the SMIL compatibility chart at caniuse.com.
Detecting CSS 3D transforms
Modernizr can detect CSS 3D transforms, yeah. The truthiness of Modernizr.csstransforms3d will tell you if the browser supports them.
The above link lets you select which tests to include in a Modernizr build, and the option you're looking for is available there.
Detecting IE specifically
Alternatively, as user356990 answered, you can use conditional comments if you're searching for IE and IE alone. Rather than creating a global variable, you can use HTML5 Boilerplate's <html> conditional comments trick to assign a class:
<!--[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]-->
If you already have jQuery initialised, you can just check with $('html').hasClass('lt-ie9'). If you need to check which IE version you're in so you can conditionally load either jQuery 1.x or 2.x, you can do something like this:
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;
}());
N.B. IE conditional comments are only supported up to IE9 inclusive. From IE10 onwards, Microsoft encourages using feature detection rather than browser detection.
Whichever method you choose, you'd then test with
if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
// iframe or flash fallback
}
Don't take that || literally, of course.
If you're looking for a JS version (using a combination of feature detection and UA sniffing) of what html5 boilerplate used to do:
var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}
CSS tricks have a good solution to target IE 11:
http://css-tricks.com/ie-10-specific-styles/
The .NET and Trident/7.0 are unique to IE so can be used to detect IE version 11.
The code then adds the User Agent string to the html tag with the attribute 'data-useragent', so IE 11 can be targeted specifically...
Well, after doing more research on this topic I ended up using following solution for targeting IE 10+. As IE10&11 are the only browsers which support the -ms-high-contrast media query, that is a good option without any JS:
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Works perfectly.
You can use the < !-- [if IE] > hack to set a global js variable that then gets tested in your normal js code. A bit ugly but has worked well for me.
I needed to detect IE vs most everything else and I didn't want to depend on the UA string. I found that using es6number with Modernizr did exactly what I wanted. I don't have much concern with this changing as I don't expect IE to ever support ES6 Number. So now I know the difference between any version of IE vs Edge/Chrome/Firefox/Opera/Safari.
More details here: http://caniuse.com/#feat=es6-number
Note that I'm not really concerned about Opera Mini false negatives. You might be.
참고URL : https://stackoverflow.com/questions/13478303/correct-way-to-use-modernizr-to-detect-ie
'program story' 카테고리의 다른 글
| 반전 된 인덱스와 일반 이전 인덱스의 차이점은 무엇입니까? (0) | 2020.09.23 |
|---|---|
| HashMap을 공유 기본 설정에 저장하는 방법은 무엇입니까? (0) | 2020.09.23 |
| HashMap Java 8 구현 (0) | 2020.09.23 |
| Twitter Bootstrap 드롭 다운을위한 이벤트 핸들러? (0) | 2020.09.22 |
| 자바 스크립트 '게양' (0) | 2020.09.22 |