WP8 IE10视口问题

Question

你们有没有注意到，当使用-ms-viewport (特定宽度为320px或device- width )时，web浏览器内容可以移出可用空间？看起来文档大小是错误的，所以我可以向左滚动它的内容，但是除了空白处什么都没有。我也可以缩小它(但我不应该)，在那之后它的大小并不总是相同的。我知道http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html，但它帮不上忙。它在第二次或第三次导航到相同的内容后发生，并消失，例如当设备旋转时。

Answer 1

Windows Phone 8无法正确识别webkit和移动web的标准meta viewport标记。

在你的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);
}

More here (credit)

Answer 2

尝试添加以下内容

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