HTML5之viewport使用

很久都沒更新博客了，最近一年轉型移動端，固然網頁端也得兼顧，慢慢寫一寫基本性的文章，多積累。

本期介紹下viewport的一些使用：

先看看viewport在頁面中的樣子：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

 

先羅列下移動頁面遇到的單位：

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

 

 

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，窗口可大於或小於手機的可視區域，通常手機默認viewport大於可視區域。這樣不會破壞沒有針對手機瀏覽器優化的網頁的佈局，用戶能夠經過平移和縮放來看網頁的其餘部分。