（一）布局viewport
在開發pc頁面時，一般内容頁的長度和寬度都比較大，如果直接在移動端打開，因為移動端的寬度窄，之前在PC端的頁面就會因為寬度的問題出現布局混亂，是以apple公司就提出了布局viewport的概念。
各個裝置的布局viewport都不相同，ios系統的預設布局viewport是980px,這樣在布局viewport中之前在pc頁面的布局就不會亂。布局viewport如下所示：
常用的移動端系統對應的viewport值。
（二）視口viewport
上面的布局viewport主要是保證頁面的布局不亂的，還有一個叫視口viewport（visual viewport）的概念，視口viewport是使用者正在看到的網站的區域。如下圖所示：
視口viewport一般和網頁的縮放有關，如果頁面縮放比是200%，那麼視口viewport就變小了，反之亦然。
可以這麼了解：
頁面縮放比是200%時，使用者能看到的視口中的像素就變少了，是以視口viewport變小。
( 三 ) meta标簽
前面講了布局viewport和視口viewport，在實際中我們能控制的隻有布局viewport，是以在進行移動端開發之前我們經常會寫下面一段代碼：
<meta name="viewport" content="width=device-width;init-scale=1,user-scale=no"/>
這個meta标簽就是用來控制布局viewport的：
width=device-width(布局viewport的寬度為裝置的寬度)
init-scale=1(預設的縮放比是100%)
user-scale=no(使用者禁止縮放)
其中，在JavaScript中通過下面方法可以獲得對應的viewport：
布局viewport: document.body.clientWidth
視口viewport:window.innerWidth
以上，就是響應式開發過程中第二個要明白的問題：視口。