Détecter Metro UI Version de IE

Donc, il ne semble pas y avoir de test définitif pour identifier Metro IE vs Desktop IE, mais il semble y avoir quelques données différentes que vous pouvez tenter d'utiliser pour supposer que c'est Metro. Malheureusement, aucun des éléments que j'ai trouvés ne peut être expliqué par d'autres paramètres. En d'autres termes, pour tous les tests "fonctionnalités" que j'ai trouvés, Desktop IE pourrait être configuré de manière à tromper les tests en pensant qu'il fonctionnait sur Metro.

ActiveX est-il désactivé (Metro n'autorise aucun contenu actifx, mais IE de bureau peut aussi le configurer pour être désactivé):

 function isActivexEnabled() { var supported = null; try { supported = !!new ActiveXObject("htmlfile"); } catch (e) { supported = false; } return supported; } 

Vérification de la chaîne de l'agent utilisateur (le métro fonctionnera toujours en mode 64 bits, mais ne sera pas sur une machine à 32 bits et Desktop IE peut être configuré pour fonctionner en mode 64 bits et ne sait pas à quel point l'une ou l'autre de ces options sera populaire)

 function isWin64() { return navigator.platform == "Win64"; } 

Vérification de l'écran complet (Metro sera toujours en mode plein écran, mais Desktop IE peut également fonctionner en mode plein écran, mais cela pourrait être utilisé comme preuve de support du mode Metro)

 function isFullScreen() { return (window.innerWidth == screen.width && window.innerHeight == screen.height); } 

Bref, je pense que vous devez essayer de vérifier une multitude de fonctionnalités, puis devinez, il n'y a pas de moyen définitif. Ou vous pouvez simplement accepter que MS ne veut pas que vous le fassiez et utilisez la détection de fonctionnalité pour les fonctions que vous souhaitez utiliser.

Pour ceux qui veulent essayer de fournir une interface utilisateur pour se référer à l'interface utilisateur du navigateur contenant (pour indiquer comment installer Pin sur la page Web par exemple), n'oubliez pas que d'autres applications Metro peuvent intégrer le navigateur IE10 Metro en tant que contrôle, même si vous Pourrait identifier le navigateur sous forme de métro par rapport au bureau, l'interface utilisateur pourrait ne pas être l'endroit où vous tenteriez de vous référer, ce qui peut finir par être une situation assez difficile à obtenir 100% du temps. Donc, n'essayez pas, ou vous pouvez tenter les autres techniques de détection et accepter qu'il existe des cas d'utilisation que vous pourriez afficher une mauvaise IU.

Je ne crois pas qu'il existe un moyen de déterminer si une demande provient de la version Metro d'IE10 par rapport à la version de mode de bureau ordinaire. Metro IE n'a pas d'en-têtes HTTP ou de chaîne d'agent utilisateur unique pour l'identifier.

Cordes de l'agent utilisateur Internet Explorer 10 sur Windows 8 64 bits

Metro IE10 est une application 64 bits, donc vous verrez "Win64" dans la chaîne user-agent. Ordinateur de bureau ordinaire IE10, par défaut, est de 32 bits et affichera "WOW64". Vous pourriez faire une idée éduquée en fonction de cela, mais vous identifieriez faussement quiconque a choisi d'exécuter la version 64 bits d'IE10 en mode bureau. Comme vous pouvez le voir à partir de ce tableau, les chaînes utilisateur-agent sont identiques. [Modifier: comme indiqué dans les commentaires, cela ne fonctionnera pas pour les ordinateurs 32 bits.]

J'ai pu voir pourquoi vous voudrez peut-être détecter Metro IE, mais ce type de "sniffing de navigateur" est généralement découragé car il est si encombrant et propice aux erreurs. Il serait préférable de disposer d'un test pour certaines fonctionnalités de navigateur dont vous avez besoin en utilisant quelque chose comme Modernizr , si vous le pouvez.

Merci John Rajakumar et Alexis Pigeon. J'ai pu utiliser votre contrôle Metro IE comme base pour charger une feuille de style CSS séparée pour les tablettes Metro (MS Surface). Pour ajouter un peu plus de certitude dans mon esprit, j'ai utilisé cssuseragent pour détecter IE10 d'abord, puis combiné les deux tests dans un test final de yepnope .

 var IEmetrotest = ((cssua.userAgent.ie > 9) && (metrotest())); yepnope({ test: IEmetrotest, yep : ['ie_metro.css'] }); 

Testé dans Browserstack et fonctionne comme prévu. (Je t'ai marqué, mais je n'ai pas encore assez de points.)

 // Minor revisions to isBrowserSupportPlugin() previously posted // Renamed function to metrotest() and inverted the returned value. var errorName = null; function metrotest() { var supported = null; try { new ActiveXObject(""); } catch (e) { // FF has ReferenceError here errorName = e.name; } try { supported = !!new ActiveXObject("htmlfile"); } catch (e) { supported = false; } if(errorName != 'ReferenceError' && supported==false){ supported = false; }else{ supported =true; } return !supported; } 

METRO IE ne supporte jamais ActiveX ou aucun objet de plugin. En fonction de cela, le script suivant est testé et fonctionne correctement.

 //---------------------------Metro IE check------------------------- var errorName = null; function isBrowserSupportPlugin() { var supported = null; try { new ActiveXObject(""); } catch (e) { // FF has ReferenceError here errorName = e.name; } try { supported = !!new ActiveXObject("htmlfile"); } catch (e) { supported = false; } if(errorName != 'ReferenceError' && supported==false){ supported = false; }else{ supported =true; } return supported; } //---------------------------------------------------------------- 

Voici une méthode cohérente, sans aucune dépendance de vérification ActiveX, comme testé dans IE10 et IE11 spécifiquement .

 if (window.screenY === 0 && (window.innerHeight+1) !== window.outerHeight){ //IE metro/modern UI } 

La première règle détecte l'écran plein écran d'IE ou une vue moderne (qui peut ou peut aussi être vrai sur IEMobile). Le mode maximisé étant historiquement toujours associé à un screenX et à un screenY positive ou négatif.

Et la dernière règle exclut le mode [Plein écran / F11], qui pour une raison quelconque montre constamment un écart de outerHeight entre outerHeight et innerHeight testé sur IE10 / Win8 et IE11 / Win8.1

PS: Je déclare volontairement que window.screenX === 0 . Utilisez uniquement screenY pour couvrir Modern / Metro en mode snap-mode avec un contexte de fenêtre cassé à droite (c.-à-d. ScreenX! == 0).

Détection moderne / métropolitaine fiable!

J'ai trouvé un moyen de détecter Modern versus Desktop que vous pouvez essayer ici: http://jsbin.com/genac/2 (éditer à l'aide de Chrome ou Firefox, pas IE http://jsbin.com/genac/2/edit ).

Il semble que ce soit une détection assez robuste car:

• Il fonctionne même si vous avez un zoom pincé
• Il fonctionne même si deux fenêtres ont cassé côte à côte sur Modern (Metro)
• Il fonctionne même si la page a été zoomée en utilisant ctrl- + et ctrl–
• Il fonctionne même si le bureau est en plein écran à l'aide de la touche F11 sur le bureau (autohiding barre des tâches)

L'astuce est que les barres de défilement de la page sur Modern ne réduisent pas la taille de la fenêtre du client (elles apparaissent au-dessus de la page), mais les barres de défilement de la page sur le Bureau affectent la taille de la fenêtre du client (la taille de la fenêtre utilisable est plus petite).

L'inconvénient principal est que le test exige que vous ayez une barre de défilement sur la page pour renifler la différence. Est-ce que la même différence dans les barres de défilement se produit dans un iframe ou une division automatique?

Edit: Je vérifierais que le navigateur IE11 avant d'utiliser ce code, car Windows 10 n'a pas Metro / Modern et Edge fonctionne légèrement différemment.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <title>Metro width detector - robocat</title> <script> function show() { var div = document.createElement('div'); var s = []; s.push('IS METRO? ' + ((tester.offsetWidth == window.outerWidth) ? 'YES' : 'NO')); s.push('document.documentElement.clientWidth: ' + document.documentElement.clientWidth); s.push('document.documentElement.offsetWidth: ' + document.documentElement.offsetWidth); s.push('window.innerWidth: ' + window.innerWidth); s.push('window.outerWidth: ' + window.outerWidth); s.push('screen.width: ' + screen.width); s.push('screen.availWidth: ' + screen.availWidth); s.push('document.documentElement.getBoundingClientRect().width: ' + document.documentElement.getBoundingClientRect().width); s.push('tester.offsetWidth: ' + tester.offsetWidth); div.innerHTML = s.join('<br>'); document.body.insertBefore(div, document.body.firstChild); } window.onresize = function() { show(); } </script> </head> <body onload="show()" style="margin:0"> <div id="tester" style="position:absolute;left:0;right:0;"></div> <div style="height:10000px;width:10px;background-color:blue;"></div> </body> </html> 

Vous pouvez consulter les dimensions de la page / fenêtre en utilisant: http://jsbin.com/AbimiQup/10 (modifier à l'aide de Chrome ou Firefox, pas IE http://jsbin.com/AbimiQup/10/edit )

PS: Il pourrait y avoir un moyen de renifler la différence de la barre de défilement du runtimeStyle for body ou document.documentElement car peut-être -ms-overflow-style: -ms-autohiding-scrollbar est utilisé (par exemple document.documentElement.runtimeStyle.msOverflowStyle) mais I N'a rien trouvé.

PPS: la méthode ActiveX donnée dans d'autres réponses n'est pas particulièrement fiable (p. Ex., Les utilisateurs peuvent désactiver) et cela cause des problèmes d'UI car, dans IE11, il montre une icône "ActiveX" à côté de l'url.

Par le son, vous cherchez à faire quelque chose dans le sens de Pinning d'un site sur l'écran de démarrage dans le métro. Pour ce faire, vous pouvez vérifier si un site peut être épinglé en utilisant ce code qui a été introduit avec IE9 et peut être fait en faisant quelque chose comme ça …

 function doChecks_Browser() { // full pin abilities == can pin && Win7+ if (pinnedSiteDetection.hasFullPinAbilityBrowser) } 

Plus d'informations à ce sujet ici .

De cette publication sur MSDN …

Windows 8 Release Preview implémente les sites épinglés à l'aide de tuiles sur l'écran de démarrage. Lorsqu'un utilisateur clique sur la mosaïque d'un site épinglé, le site s'ouvre dans Windows Internet Explorer 10 Release Preview dans l'environnement de l'interface utilisateur Windows Metro.

J'espère que cela pourra aider!

J'ai testé ce qui suit et cela fonctionne , un jsfiddle montrant cela peut être trouvé ici .

C'est un peu long, mais semble une solution assez judicieuse:

Pourquoi ne pas vérifier si le navigateur est en plein écran ¹ et, selon cet appel, le métro en plein écran. J'ai Windows 8 fonctionnant sur mon ordinateur au travail, alors je vais essayer de vérifier demain s'il y a encore une GUI (ne pense pas que je me souvienne) et si oui, vous devrez les soustraire manuellement. Certes, ce n'est pas la solution la plus belle, mais pour autant que je sache, il n'y aura pas de solution «magnifique» et cela pourrait s'avérer être un hack assez solide car l'interface graphique de l'IE de métro ne peut pas être modifiée avec des barres d'outils Ou un logiciel similaire (à ma connaissance). Certes, cela pourrait conduire à une mauvaise identification de l'IE de bureau, mais même cela est dans la raison, car un IE de bureau à écran plein donnera encore une expérience similaire.

¹ Donner quelque chose dans le sens de:

 if(window.innerWidth == screen.width && window.innerHeight == screen.height) { // metro } else { // desktop } 

Il a essayé le code ci-dessous et cela semble fonctionner.
Il ne capture pas si l'utilisateur va InternetOptions-> CustomLevel-> ScriptActivexControlsMarkedSafeForScripting = false sur vous cependant. Si l'utilisateur le fait, le code croit que c'est un métro / moderne.
Actuellement, je ne vois aucun moyen de vérifier le système d'exploitation, FullScreen et autres.

IsWinModern checks for Metro / Modern.
IsWinDesktop vérifie pour Windows en tant que bureau (= non moderne dans ce cas)

Le code ci-dessous n'est pas garanti pour fonctionner.

  function isWin8Modern() { if (!!window.ActiveXObject) { try { !!new window.ActiveXObject('htmlfile'); return false; } catch (exc) { return true; } } else { return false; } } function isWinDesktop() { if (window.ActiveXObject) { try { new window.ActiveXObject('htmlfile'); return true; } catch (exc) { return false; } } else { return false; } } 

 var _ua = window.navigator.userAgent; var isIDevice = (/iphone|ipod|ipad/i).test(_ua); var isMobileChrome = (_ua.indexOf('Android') > -1 && (/Chrome\/[.0-9]*/).test(_ua) && _ua.indexOf("Version") == -1); var isMobileIE = _ua.indexOf('Windows Phone') > -1; function isActivexEnabled() { var supported = null; try { supported = !!new ActiveXObject("htmlfile"); } catch (e) { supported = false; } return supported; } if (!isIDevice && !isMobileChrome && !isMobileIE && _ua.toLowerCase().indexOf("wow") == -1 && !isActivexEnabled()) { //IE Metro UI } 

Ce travail pour moi …

J'ai passé un certain temps à ce sujet et j'ai découvert un chemin. J'ai pensé à ce qui manque de IE10 Metro et une seule chose qui est documentée n'est pas prise en charge dans l'UI Metro. Les outils de développement. Eh bien, ces outils ont des objets dans l'objet fenêtre. L'un d'entre eux est "__IE_DEVTOOLBAR_CONSOLE_COMMAND_LINE".

Si vous faites quelque chose comme

 if (window.__IE_DEVTOOLBAR_CONSOLE_COMMAND_LINE) { // In IE 10 Standard UI } else { // In IE 10 Metro UI } 

Je l'ai testé dans quelques environnements différents et cela semble fonctionner dans la plupart des endroits. Le seul problème que je peux penser est si les outils de développement étaient en quelque sorte désactivés sur le navigateur de l'utilisateur.