移動端適配之三：使用meta標籤設置viewport

前兩篇博客，把像素和viewport的概念講清楚了。如今開始，用meta標籤來設置viewport。

meta標籤

meta標籤裏面的內容，主要是提供關於這個HTML頁面的元信息的。簡單點說，就是你用這些信息來告訴瀏覽器，應該如何解析這個HTML文件。好比

<meta charset="utf-8">

這個標籤是告訴瀏覽器，該HTML文件的字符編碼格式是utf-8。當瀏覽器解析該HTML文件時，因爲meta標籤位於頭部，會先獲取到這個信息，而後瀏覽器就用這個utf-8編碼來解析這個HTML文件中的字符。

固然，除了上面這種簡單的格式外，meta標籤更常見的是這種name + content的形式：

<meta name="format-detection" content="telephone=no" />

name屬性的值告訴瀏覽器，這個meta標籤設置的是format-detection，其具體值是content中的telephone=no，即忽略將數字識別成電話號碼。

viewport的設置

上一篇博客的最後已經提到，咱們所作的適配，就是要調整layout viewport的大小，而用meta標籤就能夠調整layout viewport的大小。上網去搜移動端適配，必定會看到下面這句代碼：

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

先介紹一下這幾個屬性：

屬性名	說明
width	設置layout viewport的寬度，爲一個正整數，或字符串width-device
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置layout viewport的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許
target-densitydpi	值能夠爲一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個。安卓中支持，當 target-densitydpi=device-dpi 時， css中的1px會等於物理像素中的1px。

回到應用場景，咱們用這個標籤的主要目的是作移動端的適配，通常都是作一個專門爲移動端設計的頁面。因此，咱們在設置layout viewport時，固然但願這個viewport的尺寸等於ideal viewport。

需求已經明確了，接下來看看咱們如何利用上面表裏的屬性來實現。

利用width

<meta name="viewport" width="device-width">

這個width，就是用來設置layout viewport的寬度。咱們設置其值爲device-width，也就是設置成設備的實際寬度。而ideal viewport的寬度是與設備的寬度相等的，因此，這句代碼就把viewport設置成了ideal viewport的大小。能夠分別用window.innerWidth和document.document.clientWidth查看：

固然，只要你高興，也能夠設置成別的值，好比把寬度設置成1000，那麼layout viewport就會比visual viewport大，瀏覽時會有一個滾動條。具體實現時，代碼上最好加上initial-scale=1.0，防止瀏覽器對頁面進行縮放。

利用scale

<meta name="viewport" initial-scale="1.0">

Initial-scale用來設置初次加載頁面時layout viewport相對於ideal viewport的大小。具體計算公式是：

layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport

須要注意的是，利用scale設置，不管計算出來的layout viewport的值大小如何，最後都會被瀏覽器自動縮放到與visual viewport大小相等，並不會出現滾動條。具體看下面的例子，咱們設置的紅框大小爲100x100px，字體大小爲32px。

initial-scale=1.0

設置scale值爲1.0，那麼layout viewport的大小與ideal viewport大小相等：

此時紅框顯示出來的大小就是100px，字體大小也就是32px。

initial-scale=0.5

設置scale值爲0.5，那麼layout viewport的大小就是ideal viewport的兩倍，即750px：

可是瀏覽器會把layout viewport進行縮放，從而達到與visual viewport大小適配。對於已是visual viewport750px的layout viewport，須要縮放到之前的0.5倍，才能正好適配375px。因此，100px的紅框看起來只會有50px的大小，字體也會對應的縮小一半。若是設計圖的大小是750px，那麼樣式大小徹底能夠按照設計圖來寫，最後只要設置scale爲0.5，視覺上的效果就是縮小後的。

這裏用window.innerWidth打印出來的visual viewport大小不對，用screen.width打印出來是對的，具體緣由網上也沒查到。有知道的同窗歡迎在評論區留言~

initial-scale=2.0

設置scale的值爲2，那麼layout viewport的大小就是ideal viewport的一半，即188px：

一樣的，瀏覽器會自動縮放。原本是188px的layout viewport，須要放大兩倍，才能填滿visual viewport。此時，100px的紅框會被放大成200px，字體大小會放大到64px。

同時使用

width和scale兩種方式均可以實現，可是兼容性不一樣。咱們的目的，是爲了把layout viewport設置成ideal viewport的帶下。爲了能兼容全部的設備，就有了下面的方案：

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

若是二者設置的大小不同，那麼會取較大者。設置width爲device-width，而後再設置縮放值爲1，就徹底限制了layout viewport的大小爲visual viewport了。其餘的屬性，都是來控制縮放的。其實，設置了maximum-scale=1.0, minimum-scale=1.0就至關於設置了user-scalable=no了。若是不由用縮放，那麼layout的viewport的大小在縮放時仍是會變的。

小結

用viewport的目的，是爲了設置layout viewport的大小，從而保證能在移動端設備上合適的顯示出來。