Rileva Metro UI versione di IE

Qual è il metodo più veloce per rilevare User-Agent come versione UI della metropolitana di internet-explorer >=10 ?

Quindi, non sembra esserci un test definitivo per identificare Metro IE vs Desktop IE, ma sembra che ci siano alcune diverse parti di dati che è ansible tentare di utilizzare per supporre che si tratti di Metro. Sfortunatamente, nessuno degli articoli che ho trovato non può essere spiegato da altre impostazioni. In altre parole, per tutti i test “feature” che ho trovato, Desktop IE potrebbe essere configurato in modo da ingannare i test in modo che pensassero che era in esecuzione su Metro.

ActiveX disabilitato (Metro non consente alcun contenuto activex, ma IE desktop può impostarlo anche su Disabilitato):

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

Controllo stringa agente utente (Metro funzionerà sempre in modalità 64 bit, ma non su una macchina a 32 bit, e Desktop IE può essere configurato per l’esecuzione in modalità 64 bit e non è sicuro di quanto saranno popolari queste opzioni)

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

Controllo a schermo intero (Metro sarà sempre in modalità schermo intero, tuttavia Desktop IE può anche funzionare in modalità schermo intero, ma questo potrebbe essere usato come prova a supporto della modalità Metro)

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

In breve, penso che devi provare a controllare un sacco di funzioni, e poi indovinare, non c’è un modo definitivo. Oppure potresti semplicemente accettare che MS non vuole che tu lo faccia e utilizzare il rilevamento delle funzioni per le funzionalità che desideri utilizzare.

Per coloro che desiderano provare a fornire un’interfaccia utente per fare riferimento all’interfaccia utente del browser contenente (per indicare come bloccare la pagina Web, ad esempio), tenere presente che altre app Metro possono incorporare il browser Metro IE10 come controllo, quindi anche se si potrebbe identificare il browser come Metro vs desktop, l’interfaccia utente potrebbe non essere quella in cui tenteresti di fare riferimento ad essa, quindi questo può finire per essere una situazione piuttosto complicata per ottenere il 100% del tempo. Quindi, non provare, o potresti provare le altre tecniche di rilevamento e accettare che ci sono casi d’uso che potresti visualizzare l’interfaccia utente sbagliata.

Non credo che ci sia un modo per determinare se una richiesta proviene dalla versione Metro di IE10 rispetto alla normale versione desktop mode. Metro IE non ha intestazioni HTTP o stringa user-agent univoche per identificarlo.

Stringhe degli agenti utente di Internet Explorer 10 su Windows 8 a 64 bit

Metro IE10 è un’applicazione a 64 bit, quindi vedrai “Win64” nella stringa user-agent. Il desktop normale IE10, per impostazione predefinita, è a 32 bit e mostrerà “WOW64”. Potresti fare un’ipotesi basata su questo, ma dovresti identificare erroneamente chiunque abbia scelto di eseguire la versione a 64 bit di IE10 in modalità desktop. Come puoi vedere da quel grafico, le stringhe user-agent sono identiche. [modifica: come indicato nei commenti, questo non funzionerà con i PC a 32 bit.]

Potrei capire perché potresti voler rilevare Metro IE, ma questo tipo di “sniffing del browser” è generalmente scoraggiato perché è così ingombrante e sobject a errori. Sarebbe meglio mettere a prova per alcune funzionalità del browser che è necessario utilizzare qualcosa come Modernizr , se ansible.

Grazie John Rajakumar e Alexis Pigeon. Sono stato in grado di utilizzare il controllo Metro IE come base per caricare un foglio di stile CSS separato per i tablet Metro (MS Surface). Per aggiungere un po ‘più certezza nella mia mente, ho usato cssuseragent per rilevare prima IE10, e poi ho combinato entrambi i test in un test di yepnope finale.

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

Testato in Browserstack e funziona come previsto. (Avrei fatto il check-in, ma non ho ancora abbastanza punti).

 // 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 non supporta mai ActiveX o altri oggetti plugin. Sulla base di ciò, il seguente script è stato testato e funzionante.

 //---------------------------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; } //---------------------------------------------------------------- 

Ecco un metodo coerente, senza dipendenza da controllo ActiveX, come testato in IE10 e IE11 in particolare .

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

La prima regola rileva lo schermo intero di IE o la vista moderna (che può o può anche essere vera su IEMobile). Storicamente la modalità massima è sempre associata a screenX positivo o negativo e screenY.

E l’ultima regola esclude la modalità [Schermo intero / F11], che per qualche ragione mostra costantemente una discrepanza di outerHeight tra outerHeight e innerHeight come testato su IE10 / Win8 e IE11 / Win8.1

PS: volontariamente non dichiaro window.screenX === 0 . Usare solo screenY per coprire Modern / Metro in modalità snap con un contesto di finestra spezzato a destra (cioè screenX! == 0).

Rilevazione moderna / metropolitana affidabile!

Ho trovato un modo per rilevare Modern versus Desktop che puoi provare qui: http://jsbin.com/genac/2 (modifica utilizzando Chrome o Firefox non IE http://jsbin.com/genac/2/edit ).

Sembra essere un rilevamento abbastanza robusto perché:

  • funziona anche se pizzicato con lo zoom
  • funziona anche se due windows scattate fianco a fianco su Modern (Metro)
  • funziona anche se la pagina è ingrandita usando ctrl- + e ctrl–
  • funziona anche se il desktop è a schermo intero utilizzando il tasto F11 sul desktop (hide automaticamente la barra delle applicazioni)

Il trucco è che le barre di scorrimento della pagina su Modern non riducono le dimensioni della finestra del client (appaiono sopra la pagina), ma le barre di scorrimento della pagina sul desktop influiscono sulle dimensioni della finestra del client (la dimensione della finestra utilizzabile è inferiore).

Lo svantaggio principale è che il test richiede di avere una barra di scorrimento sulla pagina per annusare la differenza. La stessa differenza nelle barre di scorrimento si verifica in un iframe o div autoscrivibile?

Modifica: vorrei verificare che il browser sia IE11 prima di utilizzare questo codice, perché Windows 10 non ha Metro / Modern e Edge agisce in modo leggermente diverso.

      Metro width detector - robocat    

Puoi guardare le dimensioni della pagina / finestra usando: http://jsbin.com/AbimiQup/10 (modifica usando Chrome o Firefox non IE http://jsbin.com/AbimiQup/10/edit )

PS: Potrebbe esserci un modo per annusare la differenza della barra di scorrimento dal runtimeStyle per body o document.documentElement perché forse -ms-overflow-style: -ms-autohiding-scrollbar è usato (es. Document.documentElement.runtimeStyle.msOverflowStyle) ma io non ho trovato nulla

PPS: il metodo ActiveX fornito in altre risposte non è particolarmente affidabile (ad esempio, gli utenti possono disabilitare) e causa brutto UI perché in IE11 mostra un’icona “ActiveX” accanto all’URL.

Dai suoni di ciò che stai cercando di fare qualcosa sulla falsariga di Pinning a site to the start screen in Metro. Per fare ciò puoi verificare se un sito può essere bloccato usando questo codice che è stato introdotto con IE9 e può essere fatto facendo qualcosa del genere …

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

Maggiori informazioni su questo qui .

Da questo questo post su MSDN …

Windows 8 Release Preview implementa i siti aggiunti mediante i riquadri nella schermata Start. Quando un utente fa clic sulla tessera di un sito aggiunto, il sito si apre in Anteprima di Windows 10 Explorer nell’ambiente dell’interfaccia utente di Windows Metro.

Spero possa aiutare!

Ho provato quanto segue e funziona , un jsfiddle che mostra questo può essere trovato qui .


Questo è un po ‘lungo, ma sembra una soluzione abbastanza ragionevole:

Perché non verificare se il browser è a schermo intero 1 e in base a quella chiamata a schermo intero una metropolitana. Ho Windows 8 in esecuzione sul mio computer al lavoro, quindi cercherò di controllare domani se ci sono ancora delle GUI in giro (non credo di ricordarmene) e in tal caso, dovresti sottrarle manualmente. È vero, non è la soluzione più bella, ma per quanto ne so non ci sarà alcuna soluzione “bella” e questo potrebbe rivelarsi un bel compromesso, poiché la GUI di metro IE non può essere cambiata con nessuna barra degli strumenti o software simile (per quanto ne so). È vero, potrebbe portare a un’identificazione errata di IE desktop, ma anche questo è entro limiti ragionevoli, poiché un IE desktop a schermo intero darà comunque un’esperienza simile.


1 Dare qualcosa sulla falsariga di:

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

Ha provato il codice qui sotto e sembra funzionare.
Non cattura se l’utente utilizza InternetOptions-> CustomLevel-> ScriptActivexControlsMarkedSafeForScripting = false su di te. Se l’utente fa ciò, il codice crede che sia un Metro / Moderno.
Attualmente non vedo alcun modo intorno a questo controllando OS, FullScreen e quant’altro.

IsWinModern controlla Metro / Modern.
isWinDesktop controlla Windows come desktop (= non moderno in questo caso)

Il codice sottostante non è garantito per funzionare.

  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 } 

Questo lavoro per me ..

Ho passato un po ‘di tempo su questo e ho trovato un modo. Ho pensato a cosa manca a IE10 Metro e solo una cosa documentata non è supportata nell’interfaccia di Metro. Gli strumenti di sviluppo. Bene, quegli strumenti hanno oggetti nell’object della finestra. Uno di questi è “__IE_DEVTOOLBAR_CONSOLE_COMMAND_LINE”.

Se fai qualcosa del genere

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

L’ho provato in alcuni ambienti diversi e sembra funzionare la maggior parte dei posti. L’unico inconveniente che posso pensare è se gli strumenti di sviluppo fossero in qualche modo disabilitati nel browser dell’utente.