移動裝置上的視口是裝置螢幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但視口又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。在預設情況下，移動裝置上的視口都是大於瀏覽器可視區域的，這是因為移動裝置的解析度相對於pc來說都比較小，所以為了能在移動裝置上正常顯示那些為pc瀏覽器設計的**，移動裝置上的瀏覽器都會把自己預設的視口設為980px或1,024畫素（也可能是其它值，由裝置本身決定），但後果是瀏覽器出現橫向滾動條，因為瀏覽器可視區域的寬度比預設的視口的寬度小。
viewport的寬度可以通過document.documentelement.clientwidth來獲取。
布局視口的寬度是大於瀏覽器可視區域的寬度的
，所以還需要乙個視區來代表瀏覽器可視區域的大小，即設
這個視口叫做視覺viewport.visual視口的寬度可以通過document.documentelement.innerwidth來獲取。
利用元標籤對視口進行控制
meta viewport的6個屬性：
width
設定layout viewport 的寬度，為乙個正整數，或字串"width-device"
initial-scale
設定頁面的初始縮放值，為乙個數字，可以帶小數
minimum-scale
允許使用者的最小縮放值，為乙個數字，可以帶小數
maximum-scale
允許使用者的最大縮放值，為乙個數字，可以帶小數
height
設定layout viewport 的高度，這個屬性並不重要，很少使用
user-scalable
是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
寬度能控制layout viewport的寬度，如果不指定該屬性，layout viewport預設為980px或1024px（也可能是其它值，由裝置本身決定），如果把layout viewport的寬度設定為移動裝置的寬度，那麼布局視口將成為理想的視口。
其實，要把當前的視口的寬度設為理想視口的寬度，既可以設定width = device-width，也可以設定initial-scale = 1，但有乙個小缺陷，就是width = device-width會導致iphone，ipad橫向屏不分，initial-scale = 1會導致ie橫向屏不分，都以豎屏的理想viewport寬度為準。所以，最完美的寫法兩者都寫上去，initial-scale = 1解iphone，ipad的缺陷，寬度=裝置寬度解決ie的缺陷。
視口設定移動端自適應的方法":
前端 移動開發 畫素 viewport
css 畫素 css 畫素是 web 程式設計的概念，本質上是為我們 web 開發者建立的乙個抽象結構，是相對的而不是絕對的。物理畫素 物理畫素是物理概念，螢幕是由很多畫素點組成的，各畫素點通過發出不同顏色的光來呈現螢幕的色彩。它是物理的，隨著裝置生產出來就已經被確定下來了，比如 iphone4 的...
移動前端viewport的基礎概念
在pc端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器的寬度一致，在css標準文件中，視口是所有css百分比寬度計算基礎，為css布局限制了乙個最大的寬度。viewport在移動端是乙個很重要的概念，涉及到三個視口 布局視口 layout viewport 視覺視口 visual viewport 和...
移動前端viewPort的那些事
1 viewport簡單說 一般來說，移動上的viewport都是大於瀏覽器視窗的，不同的裝置有自己預設的viewport值 980px或1024px 2 三個viewport的理解 layout viewport visual viewport idea viewport 上面說的，預設的view...