Веб-сайт не прокручивается в Windows Phone

Я сделал отзывчивый веб-сайт, интегрированный с nodejs, который отлично работает на всех устройствах.

но в браузере Windows Phone IE веб-страница не прокручивается вниз, я не знаю, что вызывает это.

/*css*/
@media (max-width: 400px) {
    @-ms-viewport {
        width: 320px;
    }
}

/*js*/
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);
}

у отзывчивости были некоторые проблемы на Windows Phone, поэтому я использовал вышеуказанные исправления кода, чтобы исправить проблему. Но проблема прокрутки остается, кто-то знает, как это исправить?

11
css3 html5 media-queries scroll windows-phone

1 ответов

Исправления

сходит с пара of источник, кажется, исправление, которое вы поставили на самом деле теперь вызывает некоторые устройства для визуализации неправильно (и был признан ошибкой, так что это не должно произойти в более поздних версиях...)

реализуя следующие должны удалить querks вы испытываете:

/*CSS*/
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

/*Javascript*/
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);
}

почему он это делает?

основная причина, почему это исправление необходимо, потому что Windows Phone 8 имеет замечательную функцию интерпретации ширины устройства как не оптимальную ширину окна просмотра производителя, но фактический размер разрешения (я считаю, что это единственная мобильная платформа для этого...). Это означает, что единственное устройство, которое на самом деле делает все идеально, - это Nokia Lumia 920 (их флагманский продукт). Все остальные будут иметь побочные эффекты.

первоначально решение, которое у вас есть, является рекомендуемым способом обойти это Microsoft, но, как вы видели, это немного не по плану. Это связано с тем, что он заставляет браузер определять ширину экрана, а не фактического производителя снова, что, в свою очередь, может иметь глюки (как вы видели).

0