网站无法在 Windows Phone 中滚动

Question

我已经制作了一个与 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 上的响应能力存在一些问题，因此我使用了上述代码补丁来修复该问题。但是滚动问题仍然存在，有人知道如何解决这个问题吗？

Answer 1

修复

离开couple of sources，看来您实际上安装的修补程序现在会导致某些设备渲染不正确（并且被认为是一个错误，因此在以后的版本中不应该发生这种情况...)

执行以下操作应该可以消除您遇到的问题：

/*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 具有将 device-width 解释为不是制造商的最佳视口宽度，而是实际分辨率大小的奇妙功能（我相信它是唯一这样做的移动平台...）。这意味着唯一能够真正完美呈现一切的设备是诺基亚 Lumia 920（他们的旗舰产品）。所有其他的都会有副作用。

最初，您拥有的解决方案是 Microsoft 推荐的解决此问题的方法，但是，正如您所见，它有点偏离标准。这是因为它强制浏览器确定屏幕的宽度，而不是再次确定实际的制造商，这反过来可能会出现故障（如您所见）。