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，看来您实际放入的修补程序现在导致某些设备呈现不正确（并且被识别为错误，所以它不应该＆＃39; t发生在以后的版本中......）

实施以下内容应删除您遇到的问题：

/*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（他们的旗舰产品）。所有其他人都有副作用。

最初，您所拥有的解决方案是微软推荐的解决方案，但是，正如您所见，它有点不合适。这是因为它强制浏览器确定屏幕的宽度，而不是实际的制造商，这反过来可能会出现故障（正如您所见）。

网站不在Windows Phone中滚动

1 个答案:

修复

为什么要这样做？