Chciałem użyć biblioteki Modernizr JS, aby wykryć niektóre właściwości przeglądarki, aby określić, jakie treści mają być wyświetlane, a jakie nie.
Mam aplikację o nazwie Pano2VR, która wyświetla zarówno HTML5, jak i SWF. Potrzebuję HTML5 dla użytkowników urządzeń z iOS.
Jednak IE w ogóle nie renderuje tego wyjścia „HTML5”. Wygląda na to, że ich dane wyjściowe wykorzystują transformacje CSS3 3D i WebGL, jeden lub więcej najwyraźniej nieobsługiwanych w IE9.
Tak więc dla tych użytkowników muszę wyświetlić wersję Flash. Planowałem użyć IFRAME i albo przekazać kod SRC za pomocą skryptu Modernizr, albo document. Wypisać poprawny kod IFRAME w zależności od przeglądarki.
Wszystko to prowadzi do tego, jak używać Modernizr do wykrywania po prostu IE lub nie IE? Lub wykryć transformacje CSS 3D?
Czy jest inny sposób, aby to zrobić?
źródło
Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable.
Możesz użyć Modernizr, aby wykryć po prostu IE lub nie IE, sprawdzając obsługę animacji SVG SMIL .
Jeśli włączyłeś wykrywanie funkcji SMIL do swojej konfiguracji Modernizr, możesz użyć prostego podejścia CSS i wskazać klasę .no-smil, którą Modernizr stosuje do elementu html :
html.no-smil { /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */ }
Alternatywnie, możesz użyć Modernizr z prostym podejściem JavaScript, na przykład:
if ( Modernizr.smil ) { /* set HTML5 content */ } else { /* set IE/Edge/Flash content */ }
Pamiętaj, że IE / Edge może pewnego dnia obsługiwać SMIL , ale obecnie nie ma takich planów.
Dla odniesienia, oto łącze do tabeli zgodności SMIL na caniuse.com .
źródło
Wykrywanie transformacji CSS 3D
Modernizr może wykrywać transformacje CSS 3D , tak. Prawdziwość
Modernizr.csstransforms3d
powie Ci, czy przeglądarka je obsługuje.Powyższe łącze umożliwia wybranie testów, które mają zostać uwzględnione w kompilacji Modernizr, a opcja, której szukasz, jest tam dostępna.
Wykrywanie w szczególności IE
Alternatywnie , jak odpowiedział user356990, możesz użyć komentarzy warunkowych, jeśli szukasz samych IE i IE. Zamiast tworzyć zmienną globalną, możesz użyć
<html>
sztuczki z komentarzami warunkowymi HTML5 Boilerplate do przypisania klasy:<!--[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]-->
Jeśli masz już zainicjalizowane jQuery, możesz po prostu sprawdzić za pomocą
$('html').hasClass('lt-ie9')
. Jeśli chcesz sprawdzić, w której wersji IE jesteś, aby móc warunkowo załadować jQuery 1.x lub 2.x, możesz zrobić coś takiego: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; }());
Uwaga warunkowe komentarze IE są obsługiwane tylko do IE9 włącznie. Począwszy od IE10, Microsoft zachęca do używania wykrywania funkcji zamiast wykrywania przeglądarki.
Niezależnie od wybranej metody, należy przeprowadzić test
if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){ // iframe or flash fallback }
||
Oczywiście nie bierz tego dosłownie.źródło
Jeśli szukasz wersji JS (wykorzystującej połączenie wykrywania funkcji i węszenia UA) tego, do czego służył standardowy szablon HTML5:
var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN; if (IE < 9) { document.documentElement.className += ' lt-ie9' + ' ie' + IE; }
źródło
Cóż, po przeprowadzeniu dalszych badań na ten temat, ostatecznie użyłem następującego rozwiązania do kierowania na IE 10+. Ponieważ IE10 i 11 są jedynymi przeglądarkami obsługującymi zapytanie o media -ms-high-kontrast, jest to dobra opcja bez żadnego JS:
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ specific styles go here */ }
Działa świetnie.
źródło
Sztuczki CSS mają dobre rozwiązanie dla IE 11:
http://css-tricks.com/ie-10-specific-styles/
NET i Trident / 7.0 są unikalne dla IE, więc mogą być używane do wykrywania wersji IE 11.
Następnie kod dodaje ciąg User Agent do tagu html z atrybutem „data-useragent”, dzięki czemu IE 11 może być ukierunkowany konkretnie ...
źródło
Musiałem wykryć IE w porównaniu z większością innych rzeczy i nie chciałem polegać na łańcuchu UA. Odkryłem, że używanie
es6number
z Modernizr robi dokładnie to, czego chciałem. Nie przejmuję się tą zmianą, ponieważ nie oczekuję, że IE kiedykolwiek będzie obsługiwać numer ES6. Więc teraz znam różnicę między dowolną wersją IE a Edge / Chrome / Firefox / Opera / Safari.Więcej szczegółów tutaj: http://caniuse.com/#feat=es6-number
Zauważ, że tak naprawdę nie martwię się fałszywymi negatywami Opery Mini. Mógłbyś być.
źródło
Możesz użyć
< !-- [if IE] >
hackowania, aby ustawić globalną zmienną js, która następnie zostanie przetestowana w normalnym kodzie js. Trochę brzydka, ale dobrze mi się sprawdziła.źródło