馬米思個人紀錄站

快捷提示：別忘記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.