css - WP8 IE10 视口问题

Question

你们有没有人注意到，当使用 -ms-viewport（特定宽度为 320 像素或设备宽度）时，Web 浏览器内容可以移动到可用空间之外？似乎文档大小是错误的，所以我可以将其内容滚动到左侧，但没有任何东西，然后是白色的空白区域。我也可以缩小它（但我不应该），之后它的大小并不总是相同的。我知道http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html但它没有帮助。它发生在第二次或第三次导航到相同的内容之后，并且例如在设备旋转时消失。

Answer 1

Windows Phone 8 无法正确识别meta viewportWebkit 和移动 Web 的标准标记。

在你的 CSS 中试试这个

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

然后添加这个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);
}

更多在这里（信用）

Answer 2

尝试添加以下内容

@-ms-viewport {
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
}