在pc端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器的寬度一致，在css標準文件中，視口是所有css百分比寬度計算基礎，為css布局限制了乙個最大的寬度。
viewport在移動端是乙個很重要的概念，涉及到三個視口：
布局視口（layout viewport）、視覺視口（visual viewport）和理想視口（ideal viewport）
。常見的設定如下：
1、width:控制viewport的大小，也可以指定乙個具體的值，或者是特殊的數值（device-width是裝置的寬度）；
2、height：和width相對應，指定viewport的高度
3、inital-scale:初始的縮放比例，也就是頁面第一次載入（load）的縮放比例；
4、maximum-scale:允許使用者縮放到最大的比例；
5、minimum-scale:允許使用者縮放到最小的比例；
6、user-scalable:定義使用者是否可以手動縮放。
移動端瀏覽器通常的寬度是240px ~640px，pc端的設計**的寬度至少是1024px,依然以瀏覽器視窗作為視口的話，那**內容在手機上看起來就會很窄。配置viewport讓移動端中的視口與瀏覽器寬度不再關聯。
布局視口
一般移動裝置的瀏覽器都預設設定乙個標籤，定義乙個虛擬的布局視口（layout viewport），用於解決早期頁面在手機上的顯示。ios、android基本上都會預設這個視口解析度為980px，pc上的**能夠在手機上呈現，只是元素看上去很小，可以通過手動縮放頁面。
布局視口的寬高通過document.documentelement.clientwidth/height獲取
視覺視口
視覺視口就是使用者當前看到的區域，可以通過蘇縮放來操作視覺視口，比如iphone5 是320px。通過screen.width獲取visual viewport的寬度。
通過設定visual viewport的寬度。visualviewport的寬度為screen.width/initial-scale總結：
1、預設情況下layout viewport 為980px
2、width設定布局視口，initial-scale設定視覺視口
3、layout viewport 的寬度始終大於visual viewport的寬度
移動前端中的 viewport
移動裝置上的視口是裝置螢幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但視口又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。在預設情況下，移動裝置上的視口都是大於瀏覽器可視區域的，這是因為移動裝置的解析度相對於pc來說都比較小，...
前端 移動開發 畫素 viewport
css 畫素 css 畫素是 web 程式設計的概念，本質上是為我們 web 開發者建立的乙個抽象結構，是相對的而不是絕對的。物理畫素 物理畫素是物理概念，螢幕是由很多畫素點組成的，各畫素點通過發出不同顏色的光來呈現螢幕的色彩。它是物理的，隨著裝置生產出來就已經被確定下來了，比如 iphone4 的...
移動前端viewPort的那些事
1 viewport簡單說 一般來說，移動上的viewport都是大於瀏覽器視窗的，不同的裝置有自己預設的viewport值 980px或1024px 2 三個viewport的理解 layout viewport visual viewport idea viewport 上面說的，預設的view...