20二月/120
Mobile Web Note - ViewPort
前言
因為行動裝置越來越多,因此逐漸會有開發行動版網頁的需求,而在設計版型的時候也會針對行動版來設計版型,而為了可以在多種解析度都可以正常瀏覽,通常會把寬度設計成 100% 這樣也比較不會讓裝置翻轉的時候產生內容無法充滿整個畫面的窘境,這時候再配合 ViewPort 的設定,就可以讓畫面瀏覽起來更是符合行動版網頁,也可以避免一些再使用者放大縮小網頁時候產生的問題。
說明
基本的用法相當的簡單,只需要再網頁裡面設定下面的 Meta 就可以了:
1 |
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> |
參數說明
width | 寬度。可直接設定數字或是 device-width |
height | 高度。可直接設定數字或是 device-height |
initial-scale | 使用者第一次進入網站的放大倍率。 |
minimum-scale | 使用者最小可縮小到畫面的倍率。 |
maximum-scale | 使用者最大可放大到畫面的倍率。 |
user-scalable | 使用者可否放大縮小畫面。0(不可放大)或1(可以放大)。 |
結論
在設計行動版網頁的時候得考慮到更多使用者的操作(放大、縮小等),以及螢幕翻轉的事件,這些都會影響到畫面可以呈現的像素,因此在一開始的時候就得注意到 ViewPort 的設定,以避免一些畫面呈現或是操作的的問題。
Leave a comment