网站不在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

修复方法

从几个 来源 来看，您实际上投入的修补程序现在似乎会导致某些设备渲染不正确（并被认为是一个错误，因此在以后的版本中不应发生这种情况...... ）

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

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

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