隨著近年來行動裝置的普及化,使用行動裝置上網的人口數日益增加,再加上各家廠商所推出的商品尺寸不依,而導致使用 Mobile Browser 閱覽網頁時亦產生了許多問題。

由於行動裝置上所支援像素較小的關係,因此 W3C 制定了縮放 Viewport 的技術。簡單地說,原本以螢幕閱覽為主的網頁都是寬度 900px 或 900px 以上所設計,若要在行動裝置 320px * 480px 的瀏覽器上顯示網頁的全景就會覺得畫面太小而將畫面放大(如下圖左);若我們將 Viewport 技術加入後,就可以讓 Mobile Browser 自動判別該裝置所支援的最適宜瀏覽寬度(如下圖右)。這樣一來,市面上各家廠商的行動裝置百百款便可全部支援使用!

有無使用 Viewport 示意圖

Viewport 屬性的使用

  • width=device-width:是為了讓整個頁面寬度與手機可視寬度相同,如此就可以簡單相容於不同機型螢幕大小,如果這邊 width 沒有設定的話,就會依照 CSS 給予的 width 當作預設值,這樣寫 CSS 時就能放心的把版面寬度設為100%。
  • initial-scale=1.0:設定畫面的初始縮放比例為 100%。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

以下我們為各位列出 Viewport 的其他屬性使用。

Viewport 屬性使用
width 設定畫面寬度
height 設定畫面高度
initial-scale 設定畫面的初始縮放比例
minimum-scale 設定畫面的最小縮放比例
maximum-scale 設定畫面的最大縮放比例
user-scalable 設定是否允許使用者改變縮放比例