1、viewport簡單說
一般來說，移動上的viewport都是大於瀏覽器視窗的，不同的裝置有自己預設的viewport值（980px或1024px）。
2、三個viewport的理解（layout viewport、visual viewport、idea viewport）
上面說的，預設的viewport即layout viewport：dom寬度，獲取方式：document.documentelement.clientwidth/clientheight
visual viewport代表瀏覽器的可視區域大小，或者說是螢幕大小，獲取方式：window.innerwidth/innerheight
idea viewport：移動裝置的理想viewport，無論在何種解析度下，網頁中的內容都能以差不多的大小顯示。
3.meta標籤控制viewport
該**是讓viewport的寬等於裝置的寬，並禁止使用者縮放。使用者縮放不同的**有不同的選擇，但width=device-width是想要的idea viewport效果。width=device-width：所有的瀏覽器都支援，但iphone和ipad只支援豎屏；initial-scale=1.0：是相對於idea viewport進行縮放的，兩者實現的效果一樣，但它在ie下只支援豎屏的寬。所以通常都是兩者都寫，這樣就能完美相容所有裝置了。width=400表示把當前viewport的寬度設為400px，initial-scale=1則表示把當前viewport的寬度設為ideal viewport的寬度，當遇到這種情況時，瀏覽器會取他們中較大的值。當兩者設定的寬不一樣時，如
4.關於縮放的問題 initial-scale
一般的瀏覽器不設定時，預設是layout viewport,iphone和ipad預設是全屏的縮放值
visual viewport寬度 = ideal viewport寬度 / 當前縮放值假設在iphone中，idea viewport寬為320px，initial-scal=2，此時visual viewport寬會變成160px：放大兩倍是指原來的1px現在是2px的效果，在實際寬不變的條件下，原來需要320px填滿的現在只需要160px就可以填滿了。
移動前端中的 viewport
移動裝置上的視口是裝置螢幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但視口又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。在預設情況下，移動裝置上的視口都是大於瀏覽器可視區域的，這是因為移動裝置的解析度相對於pc來說都比較小，...
前端 移動開發 畫素 viewport
css 畫素 css 畫素是 web 程式設計的概念，本質上是為我們 web 開發者建立的乙個抽象結構，是相對的而不是絕對的。物理畫素 物理畫素是物理概念，螢幕是由很多畫素點組成的，各畫素點通過發出不同顏色的光來呈現螢幕的色彩。它是物理的，隨著裝置生產出來就已經被確定下來了，比如 iphone4 的...
移動前端viewport的基礎概念
在pc端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器的寬度一致，在css標準文件中，視口是所有css百分比寬度計算基礎，為css布局限制了乙個最大的寬度。viewport在移動端是乙個很重要的概念，涉及到三個視口 布局視口 layout viewport 視覺視口 visual viewport 和...