Jak wykryć tryb wąskich snapów w Metro IE 10 na Windows 8

Question

W Windows 8, używając podstawowego szablonu Bootstrap na Twitterze, jeśli zawęzię przeglądarkę IE 10 do wąskiego okna (patrz poniżej po prawej), to się cofnie do korzystania ze stylów szerokości przeznaczonych dla smartfonów: wąskie, wysokie okno i bardzo czytelne. Jeśli jednak rzucisz przeglądarkę Metro IE 10 w wąski widok (patrz poniżej po lewej), zmniejsza ona widok całej strony, więc jest nieczytelny, zamiast używać wąskich stylów okna.

Jest to niefortunne i prawdopodobnie niezamierzona konsekwencja projektu przeglądarki Metro lub błędu.

zakładając, że nie jest rozwiązany w ostatecznej wersji, moje pytanie brzmi:

1. Czy istnieje sposób określić, że strona jest oglądany przez IE 10 Metro w trybie pękło? Wolałbym robić to w stylu Modernizatora, testując zachowanie, niż twarde kodowanie IE Metro, co może być problemem w przyszłości. W tej chwili ważniejsza jest jednak poprawka.

Answer 1

Z pomocą IEBlog post that Raymond Chen suggested w powyższych uwag, udało mi się rozwiązać ten problem poprzez dodanie następującego CSS po bootstrap stylów reagujących:

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

Ten zatrzymał zoom zachowanie w IE 10 Metro (tryb paska bocznego) i poprawnie wyświetlał mój widok zoptymalizowany dla wąskich ekranów.

Jedna uwaga końcowa: Minimalna szerokość, na której zoptymalizowane są szablony Bootstrap dla systemu Twitter to 480px (prawdopodobnie z powodu iPhone'a). W związku z tym może być konieczna dalsza optymalizacja dla 320 pikseli, aby poprawić stronę do przyciągania do bocznego paska Metro Metro.

Answer 2

Niedawno wymyśliłem rozwiązanie. Jest oparty na JavaScript i testuje zachowanie zgodnie z wymaganiami.

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

W połączeniu z deklaracją @viewport, to sprawia, że ​​dla skutecznego kombi.

@ -ms-viewport {width: device-width; } @viewport {width: device-width; }

Powyższa deklaracja @viewport omówiono w http://menacingcloud.com/?c=cssViewportOrMetaTag

nadzieję, że pomoże :)