CSS 视口(viewport)媒体查询在 Windows Phone 上关闭 IE 中的水平滚动

Question

要在 Windows 8 的现代 UI 中的 IE 中正确显示响应式布局，我们需要以下 CSS:

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

来源:IE10 Snap Mode and Responsive Design

这按预期工作，但在 Windows Phone 8 上查看时，它还会关闭我网站上较宽表格上的水平滚动(水平滚动适用于所有桌面浏览器，包括 IE)。我还使用视口(viewport)元标记。有谁知道如何解决这个问题？

这就是我在较窄布局中水平滚动表格的方式:

<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
    <table>
    ....
    </table>
</div>

Answer 1

我尝试使用以下 CSS 将媒体查询限制为仅适用于大屏幕:

@media all and (min-device-width:800px){
    @-ms-viewport{
        width:device-width;
    }
}

在桌面和移动 IE 上都能完美运行。表格按预期水平滚动。