twitter-bootstrap - 如何在 Windows 8 上的 Metro IE 10 上检测窄捕捉模式

Question

在 Windows 8 中，使用基本的 Twitter Bootstrap 模板，如果我将 IE 10 桌面浏览器缩小到一个窄窗口(见右下方)，它将回退到使用适用于智能手机的宽度样式:窄、高窗口和非常可读。但是，如果您将 IE 10 Metro 浏览器捕捉到窄 View (见左下方)，它会将整个页面 View 缩小，因此不可读，而不是使用窄窗口样式。

这是不幸的，并且可能是 Metro 浏览器设计或错误的意外结果。

假设它在最终版本中没有得到纠正，我的问题是:

有没有办法确定 IE 10 Metro 正在捕捉模式下查看该页面？我宁愿以 Modernizr 风格的方式执行此操作，测试行为，而不是硬编码 IE Metro，这在 future 可能会成为一个问题。但是，在这一点上，工作修复更为重要。

Answer 1

在 IEBlog post that Raymond Chen suggested 的帮助下在上面的评论中，我能够通过在 Bootstrap 响应样式之后添加以下 CSS 来纠正问题:

@media screen and (max-width: 320px) {
   @-ms-viewport { width: 320px; }
}

这停止了​​ IE 10 Metro(快照侧边栏模式)中的缩放行为，并正确显示了针对窄屏幕优化的 View 。

最后一点: Twitter Bootstrap 模板优化的最小宽度是 480 像素(可能是因为 iPhone)。因此，可能需要对 320 像素进行进一步优化，以改进用于 Metro 侧边栏快照查看的页面。