移動端適應(yīng)中各種名詞
PPI（每英寸像素）
一個表示打印圖像或顯示器單位面積上像素數(shù)量的指數(shù)。一般用來計量電腦拥娄，電視機和手持電子設(shè)備屏幕的精細程度蚊锹。通常情況下，每英寸像素值越高稚瘾，屏幕能顯示的圖像也越精細枫耳。它的值為 屏幕對角線分辨率/屏幕尺寸。
計算公式
例如：iphone5 的屏幕分辨率為1136 x 640 ,屏幕大小為 4 英寸孟抗。可以由下公式計算出他的PPI為326钻心。
layout viewport（布局視口）
布局視口是指網(wǎng)頁的內(nèi)容區(qū)域的大小凄硼。在pc端布局視口會隨著瀏覽器的大小變化而變化。在移動端瀏覽器為了使移動端可以兼容pc端的頁面捷沸，會將布局視口寬度默認設(shè)為980px左右摊沉。
獲取方式
document.documentElement.clientWidth/Height
設(shè)置方式
<meta name="viewport" content="width=640">
visual viewport（視覺視口）
視覺視口是指瀏覽器市口的大小，舉個例子痒给，如果說布局視口是一幅畫说墨，那視覺視口就是畫的畫框骏全，而我們看到的內(nèi)容是畫框中的內(nèi)容。在移動端不做meta標簽的情況下尼斧，這個畫框會根據(jù)畫的內(nèi)容的大小來做適應(yīng)性調(diào)整姜贡，既畫的內(nèi)容如果寬度如果是1000px，那視覺視口會擴充到1000px棺棵。如果畫的內(nèi)容是330px楼咳，視覺視口會收縮到330px。但是視覺視口的收縮和擴充是有上限和下限的烛恤。
獲取方式
window.innerWidth/height
設(shè)置方式
initial-scale設(shè)置初始縮放比例(視覺市口相對于屏幕尺寸)間接設(shè)置了視覺視口母怜。縮放比例越大缚柏，值越小苹熏。
<meta name="viewport" content="initial-scale=1">
移動端適配
由于移動端瀏覽器會設(shè)置默認的布局視口寬度（980px），視覺視口為了適應(yīng)布局視口的寬度會進行一定程度的縮放币喧。因此移動端的網(wǎng)頁都是被縮放的轨域，網(wǎng)頁的文字圖片都會被變得特別小。
解決方案
<meta name="viewport" content="width=device-width,initial-scale=1">
- 設(shè)置布局視口寬度與設(shè)備寬度一致
- 設(shè)置視覺視口與設(shè)備的縮放比例為不縮放
其實布局視口的寬度會影響視覺視口的寬度粱锐，視覺視口的寬度也會影響布局視口疙挺。兩者會保持一致。因此在大多數(shù)情況下使用下面兩種方案也可以解決問題怜浅。但是為了避免不必要的問題還是使用前面的方案為優(yōu)铐然。
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
