<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
width:[數字] 或 device-width
height:[數字] 或 device-height
initial-scale:最小0.25，最大5
minimum-scale:最小0.25，最大5
maximum-scale:最小0.25，最大5
user-scalable:1 或 0 (yes 或 no)
製作手機版網頁的時候，就可以用 viewport 將寬度設定為 device-width，可以針對裝置的寬度自動調整版面大小。
不過不同品牌的手機 run 起來又有一些差異，所以還是要看要以哪種牌子手機為主。
或者用 CSS 設定。
@viewport {
width: 450px;
user-zoom: zoom;
zoom: 2.0;
}
height： 可以同時指定 viewport 的最大高度(即 max-height) 以及最小高度 (即 min-height)。
max-height： viewport 的最大高度。
min-height： viewport 的最小高度。
width：可以同時指定 viewport 的最大寬度(即 max-width) 以及最小寬度 (即 min-width)。
max-width： viewport 的最大寬度。
min-width： viewport 的最小寬度。
zoom： 指定初始時的縮放比例，可以使用長度單位，百分比 % 以及 auto。
user-zoom： 指定是否允許使用者改變縮放比例。[zoom | fixed]
max-zoom： viewport 的最大縮放比例。
min-zoom： viewport 的最小縮放比例。
orientation： 指定行動裝置的方向。[auto | portrait | landscape]
resolution： 指定 viewport 解析度。 [auto | device | dpi]
參考文章：
1)Mobile Web 前端技術筆記(一): Viewport的設定
2)[Mobile] 淺談 @viewport 規則
文章標籤
全站熱搜
心情繪本 (6)