viewport是什么

viewport是一個區(qū)域，分為layout viewport與visual viewport

• layout viewport為頁面用來渲染的區(qū)域，是頁面真實所在位置
• visual viewport為視口區(qū)域，即手機瀏覽器可視區(qū)域，僅控制縮放相關

舉個簡單的例子來說的話，當我們用放大鏡看報紙上的內(nèi)容時，放大鏡可以在報紙上方移動并且控制縮放倍數(shù)，layout viewport即為報紙，而visual viewport即為放大鏡

為什么會存在viewport

當pc頁面或者說大的頁面放在移動端顯示時，如果直接將頁面渲染在手機瀏覽器上會導致頁面的排版布局等出現(xiàn)問題，因此需要將大的頁面渲染在一個相對較大的區(qū)域(layout viewport)，然后通過另一個visual viewport來顯示layout viewport中的內(nèi)容。

手機瀏覽器的作用

• 將頁面渲染在layout viewport
• 將layout viewport縮放

當visual viewport局域小于layout viewport時縮放后頁面很小很難操作，影響用戶體驗，因此一般在開發(fā)移動頁面時會將兩者寬度調(diào)整為一致，報紙的大小剛好等于放大鏡的大小，這樣瀏覽器縮放前與縮放后是一樣的，就不會出現(xiàn)

標簽中的viewport

viewport的設置方式如下所示

 <meta name="viewport" content="name=value,name=value">
- width: 設置layout viewport特定值(一般使用device-width)
- initial-sacle: 設置頁面初始縮放
- minimum-scale: 最小縮放
- maximum-scale: 最大縮放
- user-scalable: 用戶能否縮放

最佳實踐

<mate name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">