IE10里的捕捉模式和响应式设计

　　在Windows 8中有两种界面“视图”：Metro和经典视图。Metro采用的UI界面设计，具备光滑、快、现代这些特征，而经典模式和其他老的Windows系统一样。当你在Windows 8的Metro下运行IE10(默认)时，你会注意到有一个非常酷的特征，你可以“捕捉”一个窗口到另一边，同时观看两个窗口。当然，这样窗口就会变的相对较窄。

　　这里会出现一个折皱：当拉的时候，IE10会忽视掉那些宽度小于400像素的元窗口标签(当在“snap mode”下)。这就打乱了你精心设置的响应式计划，而造成你在iPhone或Android设备上会看到未经优化的同类智能缩放。

　　为了使IE10在“snap mode”下可以很好的发挥，你得使用CSS设备适配。CSS设备适配允许你把视窗声明移动到你的CSS里，例如使用如下规则：

　　@viewport{ [viewportproperty]; }

　　IE10也支持带-ms前缀的@viewport规则，所以**终看起来是这样：

　　@-ms-viewport{ [viewportproperty]; }

　　微软的建议：

　　@mediascreenand(max-width:400px){ @-ms-viewport{ width:320px; } }

　　上面的这些规则可以确保任何视窗宽度都小于400px，IE10会把宽度设置成320px。我不擅长把像素引进到其他流体布局里(参考Lyza’s post on em-based media queries ，你可能会知道写为什么)。相反，我的建议是：

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

　　设置完后，让我们来探讨如下3个问题。

　　为什么device-width会工作?

　　虽然说明书指出device-width应该返回“渲染表面”的设备宽度，但在Windows 8的snap mode下似乎并未这样做。除非他们声明，在snap mode下的“渲染表面”只抓拍部分屏幕。

　　关于其他浏览器?

　　早期的Chrome和Firefox都适用于Metro，并且使用典型的元视窗元素来确保在snap mode下的布局变化。

　　为什么微软选择忽略视窗(viewport)标签?

　　元视窗元素是不规范的，也就是说，它实际上并不是什么标准。它首次是由苹果在iPhone上实现的，后来**的被其他平台所应用。

　　然而，@viewport规则已逐渐被W3C标准化。事实上，**提到视窗元素是解释如何把他转换成@viewport规则。

　　另外值得一提的是你可以使用HTML、CSS和JS来构建本地Metro应用程序。这也就意味着微软在IE10里操作设备适配的方式与他们使用Metro应用程序的方式是相同的。

　　我和他们一样，认为@viewport是更优雅的解决方案并且我也很佩服他们的决定，尝试和坚持@viewport标准。话说，这是一个很大胆的决定。通过走这条路，确保了网站人数的不断增加，并且视窗元素将不在如预期那样作为窄窗口显示。考虑到目前只有Opera和IE10支持CSS设备适配，所以开发者不会太快转换他们的方式。

　　无论如何，你都需要添加@-ms-viewport规则到你的CSS里，确保你的网站看起来如预期的Windows 8那样。

　　来自：TimKadlec.com

　　(责任编辑：leonlee07)