Viewport的設定
以前智慧手機未流行時我們只要考慮網頁在桌上型瀏覽器的呈現即可，
但現在必須要把移動裝置的呈現也考慮進來，所以須要在head tag裡面加上下面這一段
<meta name="viewport" content="width=device-width, initial-scale=1">
這樣在移動裝置的呈現才不會破版。
一、content可以放置的參數有
1、width使用 device-width (裝置寬度) 作為可視區域的寬度，也可以固定寬度如width=1024。
2、height使用 device-height (裝置高度) 作為可視區域的高度。
3、initial-scale的值可為0.1~10,但我在測試時似乎不是每個值都有效。
4、minimum-scale: 最小可以縮放到 0.8 比例。
5、maximum-scale: 最大可以縮放到 2.0 比例。
6、user-scalable: 是否允許使用者進行縮放。no 不允許；yes 允許。
initial-scale、maximum-scale 與minimum-scale 會相互影響，
縮放操作以 initial-scale 為基準，maximum-scale 指定的縮放倍數必須大於 initial-scale ，
如果小於 initial-scale 則會以 maximum-scale 的倍數為初始值，
同理， minimum-scale 必須小於 initial-scale ，否則會沒有效果。
二、@viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
編譯過程會轉化成如下的CSS樣式語意，
@viewport {
width: device-width;
initial-scale: 1.0
}
照理來說，在CSS裡使用@viewport寫法也是可以的，
但@viewport寫法目前在W3C還是處於working draft，
而且大多數UA(user agent)也沒實作該語法，所以目前@viewport寫法還是行不通的。
參考資料：