二分鐘瞭解layout viewport、visual viewport、ideal viewport

layout viewport：佈局視口，就ios而言，移動設備瀏覽器的layout viewport通常默認設置爲980px。

visual viewport：視覺視口，即設備的像素分辨率，以iphone8爲例，分辨率爲750*1334像素。每一個手機的像素分辨率不一樣，分辨率的大小由硬件決定的。

ideal viewport：理想中的視口。理想視口與設備的寬度一致，iphone8的理想視口是375px。

移動端開發時，咱們利用meta標籤對viewport進行控制。

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

width：這裏的width設置的是layout viewport，device-width爲設備的寬度，也就是咱們心中的ideal viewport大小，因此width=device-width的意思是將layout viewpport設置爲ideal viewport的寬度。

initial-scale：指定頁面的初始縮放比例。比例爲ideal viewport/layout viewport，當比例爲1時，二者相等。

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

與

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

這兩種meta設置方法達到的效果是一致的。

maxinum-scale：容許用戶對頁面的最大縮放比例。

mininum-scale：容許用戶對頁面的最小縮放比例。

user-scalable：是否容許用戶對頁面進行手動縮放。

三種viewport之間的關係(以iPhone8爲例)：

ideal viewport基本決定了layout viewport可能的大小。

visual viewport/ideal viewport的比例爲2，iphone8爲二倍屏。

參考文檔：http://www.cnblogs.com/2050/p/3877280.html