WP8 IE10 视口问题答案

【问题标题】：WP8 IE10 viewport issueWP8 IE10 视口问题
【发布时间】：2013-01-10 06:24:44
【问题描述】：

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

【问题讨论】：

标签： css windows-phone-8 viewport internet-explorer-10

【解决方案1】：

尝试添加以下内容

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

【讨论】：

问题是我不能限制缩放的使用。它仍然不起作用。我注意到这里有人面临同样的问题stackoverflow.com/questions/13743992/ie-bug-responsive
我认为它可能与文档类型有关。当我删除文档类型时，页面看起来很丑，但不再有问题了。
我无法重现类似的问题（请参阅我在相关问题中的评论）。请在 jsFiddle 上发布您的示例页面
这是一个非常复杂的问题，我认为这是一个竞争条件。页面内容中有一个div，里面有img，src被定义为inline data base64 gif。我也在使用 XHTML 1.0 Strict doctype，当它被删除时，它处于怪癖模式，问题就消失了。所以我认为当使用视口结合 xhtml 和 img uri 数据时，浏览器引擎计算页面尺寸错误。我还尝试指定 div 和 img 标签的高度和宽度，但它也不起作用。唯一可行的方法是在页面的 onload 事件中注入 img 内容。

【解决方案2】：

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);
}

More here (credit)

【讨论】：

对不起，我知道这与您已经引用的来源相似，我会留给后代。