web移動端適配入門

移動端適應中各類名詞

PPI（每英寸像素）

一個表示打印圖像或顯示器單位面積上像素數量的指數。通常用來計量電腦，電視機和手持電子設備屏幕的精細程度。一般狀況下，每英寸像素值越高，屏幕能顯示的圖像也越精細。它的值爲 屏幕對角線分辨率/屏幕尺寸。

計算公式

例如：iphone5 的屏幕分辨率爲1136 x 640 ,屏幕大小爲 4 英寸。能夠由下公式計算出他的PPI爲326。

layout viewport（佈局視口）

佈局視口是指網頁的內容區域的大小。在pc端佈局視口會隨着瀏覽器的大小變化而變化。在移動端瀏覽器爲了使移動端能夠兼容pc端的頁面，會將佈局視口寬度默認設爲980px左右。

獲取方式

document.documentElement.clientWidth/Height
複製代碼

設置方式

<meta name="viewport" content="width=640">
複製代碼

visual viewport（視覺視口）

視覺視口是指瀏覽器市口的大小，舉個例子，若是說佈局視口是一幅畫，那視覺視口就是畫的畫框，而咱們看到的內容是畫框中的內容。在移動端不作meta標籤的狀況下，這個畫框會根據畫的內容的大小來作適應性調整，既畫的內容若是寬度若是是1000px，那視覺視口會擴充到1000px。若是畫的內容是330px，視覺視口會收縮到330px。可是視覺視口的收縮和擴充是有上限和下限的。

獲取方式

window.innerWidth/height
複製代碼

設置方式

initial-scale設置初始縮放比例(視覺市口相對於屏幕尺寸)間接設置了視覺視口。縮放比例越大，值越小。

<meta name="viewport" content="initial-scale=1">
複製代碼

移動端適配

因爲移動端瀏覽器會設置默認的佈局視口寬度（980px），視覺視口爲了適應佈局視口的寬度會進行必定程度的縮放。所以移動端的網頁都是被縮放的，網頁的文字圖片都會被變得特別小。

解決方案

<meta name="viewport" content="width=device-width,initial-scale=1">
複製代碼

• 設置佈局視口寬度與設備寬度一致
• 設置視覺視口與設備的縮放比例爲不縮放

其實佈局視口的寬度會影響視覺視口的寬度，視覺視口的寬度也會影響佈局視口。二者會保持一致。所以在大多數狀況下使用下面兩種方案也能夠解決問題。可是爲了不沒必要要的問題仍是使用前面的方案爲優。

<meta name="viewport" content="width=device-width">
複製代碼

<meta name="viewport" content="initial-scale=1">
複製代碼