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

【问题标题】：CSS view-port media query turns off horizontal scrolling in IE on Windows PhoneCSS 视口媒体查询在 Windows Phone 上的 IE 中关闭水平滚动
【发布时间】：2013-12-15 14:27:26
【问题描述】：

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

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

来源：IE10 Snap Mode and Responsive Design

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

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

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

【问题讨论】：

标签： css responsive-design viewport

【解决方案1】：

我尝试了以下 CSS 将媒体查询限制为仅限大屏幕：

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

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

【讨论】：