在css規範中，viewport被稱為初始包含塊。css中所有關於寬度的百分比均**於初始包含塊，同時，初始包含塊將css布局限制在乙個最大的寬度內。在桌面端，viewport的寬度就是瀏覽器視窗的寬度。因此，如果margin和padding都為0，html和body的寬度就是瀏覽器視窗的寬度。因此宣告width:35%的元素其寬度未瀏覽器視窗寬度的35%。因此，初始包含塊為頁面布局提供了乙個原始的尺寸，將頁面限制在某一寬度內。這是pc端的情況，而在mobile端，情況就有所不同。
移動端viewport設定的數值一般介於768至1024之間，常見的viewport為980。
也就是說，移動端的viewport不再與實際的移動端瀏覽器螢幕有關聯，而是相互獨立。這個viewport就被稱為布局viewport，不過該viewport仍然將css布局限制在某一寬度，同時css中關於寬度的百分比大部分都**於布局viewport。
儘管建立乙個獨立的布局viewport能將pc端的**適配到移動端，但還是無法忽略移動裝置的螢幕尺寸。這裡，將使用者當前看到的頁面區域叫做可視viewport。可視viewport的尺寸跟移動裝置的螢幕尺寸沒有直接關係，使用者通過縮放可改變可視viewport的尺寸，但出於裝置效能的考慮，布局viewport不會重新計算，這是因為由於縮放在移動端的使用頻率較高，如果布局viewport重新計算，裝置的耗電量將大幅上公升，因此mobile瀏覽器廠商會將布局viewport作為乙個抽象層從pc端的viewport獨立出來，使其不參與到使用者的該互動行為。因此布局viewport尺寸不會受到影響。
要獲得理想viewport，其實我們已經很熟悉了，就是在html中加入以下meta標籤：
它會告訴瀏覽器讓布局viewport與理想viewport相匹配。
由於裝置的物理尺寸不同，瀏覽器的理想viewport也有所不同，同時理想viewport會隨著裝置的手持方向而改變。
綜上，在pc端，瀏覽器的視窗就是viewport，也就是初始包含塊，它限制css布局的寬度，同時定義了使用者當前所看到的區域。在mobile端，pc端的viewport一分為二：限制css布局的布局viewport；定義了使用者當前看到區域的可視viewport。mobile端還有乙個理想viewport，其尺寸與裝置有關。通過meta viewport標籤能將布局viewport設定為理想viewport，事實上響應式設計的基礎就是它。
如上圖，紅色部分是布局viewport，黃色部分為理想viewport，有伸縮功能的邊框就是當前裝置的理想viewport
理想viewport會隨著模擬裝置的螢幕尺寸變化，相應地，由於meta viewport標籤能將布局viewport設定為裝置的理想viewport，布局viewport的寬度也隨著理想viewport的寬度變化。
以上是將meta viewport設定為，若initial-scale=0.5，即，情況就有所不同。
6plus的布局寬度為414/0.5=828，也就是initial-scale的取值會影響到布局viewport。由於初始狀態的縮放比為0.5，頁面內容不清晰，通過讀取橫座標，此時的可視viewport的寬度和布局viewport的寬度一樣，也是828px。當頁面縮放比增加到1.0，螢幕所看到的內容變少，但更加清晰，可視viewport就從828px變為414px，如下圖：
如果不想讓他縮放可以設定
viewport中可指定的屬性列表
屬性功能說明
width
寬度（畫素）。預設值980，範圍從200到10000。可指定為device-width
height
高度（畫素）。預設值980，範圍從233到10000。可指定為device-height
intial-scale
初始縮放比例。預設為將網頁充滿視界範圍。測定範圍從minimum-scale到maximum-scale
minimum-scale
最小縮放比例。預設為0.25。範圍從0到10.0
maximum-scale
最大縮放比例。範圍從0到10.0
user-scalable
是否允許進行縮放，指定yes或no
第一章 HTML5基礎
1.1.1 html簡介及發展史 1 html是用來描述網頁的一種語言,它是一種超文字標記語言.1.1.5 html5檔案的基本結構 頭部 head 和主體 body 兩部分,頭部包括網頁標題 title 等基本資訊,主體包括網頁的內容資訊,如,文字等.1.1.6 網頁的基本資訊 1.doctype...
HTML第一章總結
如果你要做網頁，那你寫了html文件就要上傳到 web server 上 在客戶使用 web browser 的時候，當你點選乙個鏈結，web browser請求得到 web server 的資訊，然後 web server 返回 browser 資訊 html files告訴 browser 如何...
HTML語言 第一章 HTML基礎
1.html是用來描述網頁的一種語言,它是一種超強文字標記語言,html不是一種程式語言,僅是一種標記語言.2.基本結構 3.html標籤以 開始,以 結束.4.段落和換行標籤 段落標籤 換行標籤 直接使用 表示標籤的開始和結束 表示強制換行顯示.5.水平標籤 水平標籤表示一條水平線,注意該標籤與 ...