如何在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

在上面评论中的IEBlog post that Raymond Chen suggested的帮助下，我能够通过在引导响应样式之后添加以下CSS来解决问题：

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

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

最后一点注释： Twitter Bootstrap模板优化的最小宽度为480px（可能是因为iPhone）。因此，可能需要对320像素进行进一步优化，以改善Metro侧边栏快照查看的页面。

Answer 2

我最近想出了一个解决方案。它是基于JavaScript的，并根据要求测试行为。

http://menacingcloud.com/?c=targetSnapMode

当与@viewport声明结合使用时，它会产生有效的组合。

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

上述@viewport声明在http://menacingcloud.com/?c=cssViewportOrMetaTag

进行了讨论

希望有所帮助：）