WP8 IE10 视口问题 [英] WP8 IE10 viewport issue

问题描述

你们有没有注意到，当使用 -ms-viewport(特定宽度为 320px 或设备宽度)时，Web 浏览器内容可以移动到可用空间之外?文档大小似乎有误，因此我可以将其内容向左滚动，但空白处没有任何内容.我也可以缩小它(但我不应该)，之后它的大小并不总是相同的.我知道 http://mattstow.com/响应式设计in-ie10-on-windows-phone-8.html 但它没有帮助.它发生在第二次或第三次导航到相同内容后，例如在设备旋转时消失.

解决方案

Windows Phone 8 无法正确识别 Webkit 和移动网络标准的 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);}

更多信息(信用)

Did any of you noticed that when using -ms-viewport (with specific width of 320px or device-width) then web browser content can be moved outside available space? It seems like document size is wrong so i can scroll it's content to the left but there is nothing then white empty space. I can also zoom it out(but i should not) and it's size after that is not always the same. I'm aware of http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html but it does not help. It happens after second or third navigate to the same content and disappears for example when device is rotated.

解决方案

Windows Phone 8 does not properly recognize the meta viewport tag that is standard for webkit and mobile web.

Try this in your CSS

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

And then add this 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)

这篇关于WP8 IE10 视口问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！