HTML - 移動端 meta viewport

咱們在作響應式佈局的時候，確定要考慮到適配移動端的屏幕，大多數同窗也必定複製粘貼過下面這段代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

添加了這段代碼之後，咱們在移動端看到的顯示效果就很是好，整個頁面不會縮成一團。可是不少時候咱們只是拿來用了，沒有去理解這段代碼究竟幹了什麼，爲何會影響移動端頁面的佈局效果，它又是怎麼起做用的。今天咱們就花點時間來完全搞明白 viewport 究竟是什麼。

1. 單位

在討論 viewport 以前，咱們須要理解一些單位的概念：

• 設備像素 / 物理像素（physical pixels）

是指屏幕的實際物理像素點，好比 iPhone6 Plus 是 1920*1080 的像素分辨率，那麼表明它縱向有 1920 個物理像素點，橫向有 1080 個物理像素點。

• CSS 像素（css pixel） / 密度獨立像素（density independent pixels - dip）

CSS 像素是 web 編程中的概念，是抽象的，不是實際存在的。它是獨立於設備用於邏輯上衡量像素的單位，因此又叫密度獨立像素。dip 有時候也縮寫爲 dp 。

• 屏幕尺寸

指屏幕的對角線長度，單位是英寸（inch），1 英寸 = 2.54 釐米。常見屏幕尺寸有 5.0、5.5 和 6.0 等。

• 屏幕像素密度（pixels per inch - ppi）

指屏幕上每英寸能夠顯示的物理像素點的數量。好比 iPhone6 Plus 是 5.5 英寸，分辨率（也就是物理像素）是 1920*1080 像素，那麼它的 ppi = √(1920^2+1080^2) / 5.5 ≈ 401ppi 。也就是說它每英寸能夠顯示 440 個物理像素點。

• 設備像素比

指物理像素和密度獨立像素的比值。
window.devicePixelRatio = 物理像素 / dip。
能夠經過 window.devicePixelRatio 得到，該屬性被全部WebKit瀏覽器以及Opera所支持。

2. viewport

viewport 是指 web 頁面上用戶的可見區域。

viewport 的大小是和設備相關的，在移動端例如手機上，viewport 的大小是比 PC 端要小的，通常不管手機仍是平板，默認的 viewport 大小都是 980px 。
剛開始 web 頁面僅僅是在 PC 端進行查看的，可是後來隨着移動互聯網的發展，愈來愈多的 web 訪問是經過移動端進行的，可是由於 PC 的 viewport 要比移動端大，因此爲了快速修復這個問題，移動端的瀏覽器默認只是把整個頁面等比例縮小到移動端的 viewport 大小。

這樣作的後果就是，用戶看到的是一個縮小版的整個頁面，字體、圖標和內容等等都很是小，想要點擊或者查看都須要去放大頁面進行操做，放大頁面以後就會出現橫向滾動條，這對用戶體驗來講是很是很差的。

那麼回到咱們最開始寫的 meta 標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

device-width 是指這個設備最理想的 viewport 寬度。iPhone6 以前的 device-width 都是 320px ，iPhone6 是 375px ，iPhone6 Plus 是 414px ，而這個 device-width 是和 CSS像素（也叫密度獨立像素 dip）是相同的。也就是說，web 頁面中的 CSS像素的值等於 device-width 時，對應到手機上就是佔滿全屏的寬度。

安卓手機的 device-width 有320px、360px 和 384px 等等，不一樣的設備 device-width 是不同的。

initial-scale=1.0 是指初始化的時候縮放大小是1，也就是不縮放。

user-scalable=0 是指禁止用戶進行縮放。

maximum-scale=1.0 是指用戶最大縮放大小是1，其實在禁止用戶縮放之後，這一句能夠省略。

在設計人員爲移動端設計頁面的時候常常能夠聽到2倍圖和3倍圖這些詞語，這又是什麼意思呢，咱們以 iPhone6 舉例：

iPhone6 的分辨率（也就是物理像素）是 1334*750 像素，它的 device-width 是 375px 。

若是咱們將屏幕橫向分紅 375 份，CSS 中 1px 佔用的1份，由於屏幕就那麼大，CSS中 width 等於 375px 時橫向就會佔滿全屏，可是實際上存在的物理像素點橫向是750個 ，因此在咱們寫 CSS 時 1px 對應到屏幕上是佔用了2個物理像素點。

若是咱們不寫 width=device-width 這一句的話，默認 viewport 寬是 980px 。那麼把 iPhone6 的屏幕橫向分紅980份，CSS 中 1px 佔用1份，可是真正的像素點橫向只有750個，這就意味着，實際上渲染出來的寬度是 75/98 個像素大小（只是理論上）。

設計人員在設計原型圖的時候以 750px 的寬度爲基準，咱們在寫 CSS的時候縮寫一半來使用，可是在渲染的時候 1px 等於 2px 的物理像素，因此整個圖片仍是按 750px 的寬度來顯示的，不會失真。

若是設計人員以 375px 的寬度爲基準，那麼咱們在使用的時候直接把設計圖中的像素寬度用在 CSS 中，那麼在渲染的時候，1px 等於 2px 的物理像素，至關於圖片會放大2倍，就會產生失真。

3. 總結

在添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 以後，移動端的 viewport 寬度會從默認的 980px 變成各個設備的 device-width 。

CSS 中的 100% 就等於 device-width 。

知道了這些，咱們就能夠結合別的知識，爲頁面進行響應式佈局了。

歡迎關注個人公衆號