Mobile Web Note - ViewPort

前言

因為行動裝置越來越多，因此逐漸會有開發行動版網頁的需求，而在設計版型的時候也會針對行動版來設計版型，而為了可以在多種解析度都可以正常瀏覽，通常會把寬度設計成 100% 這樣也比較不會讓裝置翻轉的時候產生內容無法充滿整個畫面的窘境，這時候再配合 ViewPort 的設定，就可以讓畫面瀏覽起來更是符合行動版網頁，也可以避免一些再使用者放大縮小網頁時候產生的問題。

說明

基本的用法相當的簡單，只需要再網頁裡面設定下面的 Meta 就可以了：

參數說明

結論

在設計行動版網頁的時候得考慮到更多使用者的操作（放大、縮小等），以及螢幕翻轉的事件，這些都會影響到畫面可以呈現的像素，因此在一開始的時候就得注意到 ViewPort 的設定，以避免一些畫面呈現或是操作的的問題。

參考資料

W3c CSS Device Adaptation

Safari Web Content Guide: Configuring the Viewport