快捷提示:别忘记Viewport Meta标签
http://webdesign.tutsplus.com/zh-hans/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972?ec_unit=dropdown-language
下列的值可以作为我们的默认设定模版:

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

结论 流动式的网页布局设计不仅仅是给那些喜欢调整他们浏览器大小的人所用的,
它为的是能满足不同设备,屏幕和分辨率的需要!当你在做流动式设计的时候,
加入viewport meta标签,并且在CSS里面设定@viewport的准则,你就万事无忧了。

相似的viewport属性在CSS里用the @viewport rule进行定义而不是在HTML里面

@viewport{ zoom: 1.0 ; width : device-width; }

或者,依照我们新的don't specify device width的方法,我们可以如下设置:

@viewport{ zoom: 1.0 ; width : extend-to-zoom; }
因为这个还没有完全敲定,IE10要求使用有前缀的版本,看上去是这样的:

@-ms-viewport{ width : extend-to-zoom; zoom: 1.0 ; }
这个是比metatag更为简洁的方案。现在先嵌入在你的CSS里面,
保证你的流动式布局在IE10的”snap mode“里正常工作,然后关注这个方案的动向。
这个是viewport以后的趋势。 你可以从Tim Kadlec的文章中读到更多IE10 Snap Mode and Responsive Design

This post is part of a series called Strange and Unusual HTML.

相关文章