淺談meta viewport
viewport(視口)，在移動端有三個視口的概念。
1.layout viewport(佈局視口)
如果移動裝置上瀏覽器可視區域設為viewport,瀏覽器為了保證網頁的正常顯示，會給viewport設定一個值(980px或者1024它，或者其他值)，這個預設的viewport叫做 layout viewport。
layout viewport可以通過document.documentElement.clientWidth來獲取。
2. visual viewport(虛擬視口)
visual viewport 是指瀏覽器可視區域的大小。可以通過document.documentElement.innerWidth來獲取。
3. ideal viewport(完美視口)
ideal viewport是一個完美適配移動裝置的viewport。首先，不需要縮放和滾動就能檢視網頁中的內容。其次，顯示的文字，圖片大小合適。
所以在寫移動端的頁面，會設定meta標籤中viewport為完美視口
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
設定viewport寬度為ideal viewport的寬度，既可以設定width=device-width,也可以設定initial-scale=1 但有一個小缺陷，就是width=device-width會導致iphone、ipad橫豎屏不分，initial-scale=1會導致IE橫豎屏不分，都以豎屏的ideal viewport寬度為準。所以，最完美的寫法兩者都寫上去， initial-scale=1 解決 iphone、ipad的缺陷，width=device-width解決IE的缺陷。
參考資料： https://blog.csdn.net/zhouziyu2011/article/details/60570547/