Come faccio a rilevare modalità snap stretta su Metro di IE 10 su Windows 8

Question

In Windows 8, utilizzando un modello di base Twitter Bootstrap, se Stringo il browser IE 10 desktop per una stretta finestra (vedi sotto a destra), cadrà indietro utilizzare gli stili di larghezza destinati agli smartphone: finestra stretta, alta e molto leggibile. Tuttavia, se si esegue lo snap di IE 10 Metro Browser su una vista ristretta (vedere in basso a sinistra), riduce la vista a tutta pagina verso il basso in modo che non sia leggibile, piuttosto che utilizzare gli stili di finestra stretti.

Questo è un peccato, e probabilmente una conseguenza involontaria della progettazione del browser della metropolitana o un bug.

Supponendo che non viene corretto nella versione finale, la mia domanda è:

1. C'è un modo per determinare che la pagina viene visualizzata da IE 10 Metro in modalità schioccato? Preferirei farlo in un modo in stile Modernizr, testando il comportamento, piuttosto che codificare IE Metro, il che potrebbe essere un problema in futuro. Tuttavia, una correzione funzionante è più importante a questo punto.

Answer 1

Con l'aiuto del IEBlog post that Raymond Chen suggested nei commenti di cui sopra, sono stato in grado di correggere il problema aggiungendo il seguente CSS dopo gli stili reattive bootstrap:

@media screen and (max-width: 320px) { 
    @-ms-viewport { width: 320px; } 
} 

Questa fermato lo zoom comportamento in IE 10 Metro (modalità barra laterale spezzata) e visualizzato correttamente la mia vista ottimizzata per schermi stretti.

Un'ultima nota: La larghezza minima per cui sono ottimizzati i modelli di Bootstrap di Twitter è 480px (probabilmente a causa dell'iPhone). Pertanto, potrebbe essere necessario eseguire ulteriori ottimizzazioni per 320 pixel per migliorare la pagina per la visualizzazione snap della barra laterale Metro.

Answer 2

Recentemente ho trovato una soluzione. È basato su JavaScript e verifica il comportamento come richiesto.

http://menacingcloud.com/?c=targetSnapMode

In combinazione con la dichiarazione @viewport, si fa per una combinazione efficace.

@ -ms-viewport {larghezza: larghezza del dispositivo; } @viewport {width: device-width; }

La dichiarazione @viewport sopra è discusso a http://menacingcloud.com/?c=cssViewportOrMetaTag

Speranza che aiuta :)