如何在Windows 8上的Metro IE 10中检测窄屏模式？

Question

在Windows 8中，使用基本的Twitter Bootstrap模板，如果我将IE 10桌面浏览器缩小到窄窗口（见下图右），它将回退到使用针对智能手机设计的宽度样式：窄而高的窗口，非常易读。然而，如果您将IE 10 Metro浏览器捆绑到窄视图（见下图左），它会将完整页面视图缩小，以至于无法阅读，而不是使用窄窗口样式。

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

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

1.是否有一种方法可以确定页面正在被IE 10 Metro在捆绑模式下查看？我更喜欢以Modernizr样式的方式测试行为，而不是硬编码IE Metro，这可能会在未来成为一个问题。但是，在这一点上，一个有效的解决方案更为重要。

- Dan Sorensen

---

IE团队就这个问题在不久前的博客中发表了文章。 - Raymond Chen

问题解决了。如果你把它作为答案发布，我很乐意给你点赞。 - Dan Sorensen

请随意回答并接受您自己的答案。 - Raymond Chen

再次感谢！我很感激。只做了最小的更改，现在看起来好多了。 - Dan Sorensen

Answer 1

在上面评论中，有Raymond Chen建议的IEBlog帖子提供的帮助下，我成功通过在bootstrap响应式样式后添加以下CSS来解决问题：

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

这样做可以停止IE 10 Metro（侧边栏模式）中的缩放行为，并正确显示针对窄屏幕进行优化的视图。

最后需要注意的是：Twitter Bootstrap模板优化的最小宽度为480像素（可能是因为iPhone）。因此，可能需要进一步优化以在Metro侧边栏捆绑查看中改善页面。

- Dan Sorensen

Answer 2

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

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

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

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

上述@viewport声明在http://menacingcloud.com/?c=cssViewportOrMetaTag中有所讨论。

希望这能帮到你 :)

- Edward