6

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

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

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

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

IE 10 窄幅 Metro 与桌面

4

2 回答 2

5

在 Raymond Chen在上述评论中建议的 IEBlog 帖子的帮助下，我能够通过在引导响应样式之后添加以下 CSS 来纠正问题：

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

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

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

于 2012-06-22T18:12:03.680 回答
0

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

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

当与@viewport 声明结合使用时，它可以实现有效的组合。

@-ms-viewport { 宽度：设备宽度；} @viewport { 宽度：设备宽度；}

上述@viewport 声明在http://menacingcloud.com/?c=cssViewportOrMetaTag进行了讨论

希望有帮助:)

于 2013-06-08T19:46:53.617 回答