订阅软件研发RSS CSDN首页> 软件研发

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

发表于2013-01-24 10:49| 次阅读| 来源CSDN| 0 条评论| 作者张红月

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

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

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

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

  1. @viewport{  
  2.     [viewport property];  

IE10也支持带-ms前缀的@viewport规则,所以最终看起来是这样:

  1. @-ms-viewport{  
  2.     [viewport property];  

微软的建议:

  1. @media screen and (max-width:400px) {  
  2.     @-ms-viewport{  
  3.         width:320px;  
  4.     }  

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

  1. @-ms-viewport{  
  2.     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

  • CSDN官方微信
  • 扫描二维码,向CSDN吐槽
  • 微信号:CSDNnews
程序员移动端订阅下载

微博关注

相关热门文章