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

Question

在Windows 8中,使用基本的Twitter Bootstrap模板,如果我将IE 10桌面浏览器缩小到一个狭窄的窗口(见右下图),它将回归到使用智能手机的宽度样式:狭窄,高大的窗口,非常可读.但是,如果将IE 10 Metro浏览器捕捉到窄视图(请参见左下图),则会缩小整页视图,使其无法读取,而不是使用窄窗口样式.

这是不幸的,可能是Metro浏览器设计或错误的意外后果.

假设在最终版本中没有更正,我的问题是:

1. 有没有办法确定IE 10 Metro在快照模式下正在查看该页面？我宁愿以Modernizr风格的方式做这个,测试行为,而不是硬编码IE Metro,这可能是未来的问题.但是,此时工作修复更为重要.

Answer 1

在Raymond Chen在上面的评论中提到的IEBlog帖子的帮助下,我能够通过在引导响应样式之后添加以下CSS来纠正问题:

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

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

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