Może jestem ostatnim, który o tym się dowiedział, a może nie.
Tak czy siak, jak piszecie stronę dla WP8 (na przykład Lumia 920), to natraficie na problem z wyświetlaniem strony – głównie dlatego, że lumia 920 będzie wam wyświetlała stronę prawie tak samo jak na desktop, co powoduje, że jest ona całkowicie nie czytelna na tak małym ekranie.
Dzieje się tak, gdyż IE (jak zwykle), jako jedyne interpretuje device-width jako aktualną rozdzielczość, zamiast optymalnej szerokości viewport. Przy Lumia 920 to jest 768 na 1024px. Co naprawdę daje nieczytelny wygląd strony.
Z początku myślałem, że ja robię coś źle, ale jak się potem okazało, jest to bug w mobile IE i to w danej konkretnej wersji.
Rozwiązań jest kilka, jednak jedno z nich gwarantuje najmniej roboty po tym jak ten bug zostanie naprawiony. Jak zawsze w takich przypadkach, naprawa polega na napisaniu kilku linijek JS, najlepsze jest to, że MS sam podał to rozwiązanie :)
Wystarczy, że na naszej stronie dodamy taki o to kod:
(function () {
if (navigator.userAgent.match(/IEMobile/10.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
A już będzie się ona poprawnie ładowała się w przeglądarce – to znaczy, zamiast traktowania urządzenia jako 768×1024 będziemy mieli szerokość ekranu ustawioną tak by dopasowała się do ekranu (z defaultu 320px tak jak to powinno być i sam ms tak zaleca).
Więcej info:
