使用 Viewport 控制手機瀏覽器顯示

什麼是 Viewport?

手機瀏覽器是把頁面放在一個虛擬的“窗口” (Viewport) 中,通常這個虛擬的 viewport 比手機的銀幕還要寬,這樣就不用把每個網頁擠到很小的畫面中,使用者可以通過平移 (Scroll) 和縮放 (Zoom) 來看瀏覽整個網頁。這個 Viewport 的概念則是由 Apple 最先提出來的, 並且將它使用在 iOS (iPhone/ iPod/ iPad) 的 Safari 瀏覽器中導入了 viewport 這個 meta tag,讓網頁開發者來控制viewport 的大小和縮放,之後市場上推出的 Smart Phone 也跟著支援這個協定

ViewPort 的基礎?

以下是我們常看到的 viewport meta 語法之一

width:控制viewport 的大小,可以指定的一個值,如果600,或者特殊的值,如device-width 為設備的寬度(單位為縮放為100% 時的CSS 的px)。
height:和 width 相對應,指定高度。
initial-scale:初始縮放比例,也即是當頁面第一次load 的時候縮放比例。
maximum-scale:允許使用者縮放到的最大比例。
minimum-scale:允許使用者縮放到的最小比例。
user-scalable:用戶是否可以手動縮放

Viewport 參考資料

Mozilla 開發者網站上的 viewport 使用介紹
Apple 開發者網站上面有viewport 詳細的描述
quirksmode.org 詳細的viewport 在各個手機瀏覽器不同之處

Leave a Reply