说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

如何让IE 10玩转响应式网站

HTML文档下载 WORD文档下载 PDF文档下载
自从IE10发布之日起,各种声音就围绕在开发者们的周围,但从11月份浏览器市场份额来看,足以说明IE10的种种优势,本文就来教你如何玩转IE10响应式网站。

通常,新版本的IE都会给开发者带来一些头疼的事情,正如前段时间微软承认IE曾经的确不够好,但现在好多了。所以开发者的福利来了,这种事情将一去不复返。实际上,支持各种Web标准的IE10已经足以媲美各个竞争对手。

IE 10增加了对十几种HTML5 API的支持,例如Web Sockets、Web Workers、历史API、拖曳API和文件API,访问微软IE 10开发者指南可以看到完整的支持列表。同样,IE 10提供了足够丰富的CSS支持,在许多新的CSS工具中都提供了动画、过渡和转换。IE 10还对下一代布局工具提供了实验性支持,例如CSS网格布局、CSS多列布局和CSS区域。

以上这些优点足以吸引大批的Web开发者,但在实际开发中,Web开发者应该注意以下两个缺点。

首先,尽管IE 10支持CSS灵活的框布局,但是只支持旧版而现在是非标准版的Flexbox(文档中仍然使用旧的语法)。非常希望微软能在更新中修正这个问题,但是现在,只有Chrome和Opera支持更新的Flexbox语法。

IE 10的另一个问题是与浏览器在Windows 8平板上的使用相关。Windows 8有两种“模式”,经典桌面和Metro用户界面。当IE 10运行在Metro模式(默认)时,有一个功能是允许将一个窗口“折断”在屏幕边缘,从而让浏览器窗口与其他应用程序并排打开,这对用户来说是非常好的功能,但是开发者需要关注这个问题——当折断窗口的时候,IE10将忽略任何宽度小于400像素的元视图标签,这也就意味着适用于较小屏幕的响应式布局无法使用折断模式,网站将会按比例显示。幸运的是,这里有个补丁,实际上,开发者Tim Kadlec在其博客上提供了具体的解决方案,详细信息请访问Kadlec的博客。

还需要注意的是,微软正在支持@viewport声明,而不是视图元标签(IE 10使用前缀:@-ms-viewport)。当视图元标签越来越被广泛支持(和使用)时,它还并不是任何W3C标准、草案或其他规范的一部分。

相关阅读:

IE10新功能解析 支持Media Query(图)

11月份浏览器市场份额 IE10已占据0.51%

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘