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