**：
本文記錄學到的有關視口的內容，不足之處請指正。
有時會使用百分比來宣告寬度,如：
html,body{}
div
假設div是body的子元素，這段css就表示該div佔body寬度的30%.body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100%。同樣的，html也沒顯示宣告寬度，因此html也佔父包含塊的100%。等等.. html的父包含塊是什麼呢？是視口。
在css標準文件中稱為初始包含塊.這個初始包含塊是所有css百分比寬度推算的根源。
在桌面上，視口的寬度與瀏覽器視窗的寬度一致。除開margin和padding，html和body元素都與瀏覽器視窗的寬度一致。這就是為啥以上div占用了瀏覽器寬度的30%。
桌面上，視口與瀏覽器視窗的寬度一致，但在手機上，視口與移動端瀏覽器螢幕寬度是不關聯的。試想下，在小螢幕的移動端裝置下，如果使視口與移動端瀏覽器螢幕寬度一致，那麼佔body的30%的div在手機上展示的寬度看起來非常非常小，因此移動端瀏覽器廠商必須保證即使在窄螢幕下元素顯示的很好，因此需要將視口的寬度設計得比螢幕寬度寬出很多，這樣**會顯示得可以想象成如桌面上的那樣。但是，如果**沒有為移動端做優化，那麼瀏覽器會盡可能的縮小**讓使用者能看到**的全貌。
總結：在手機上，視口與螢幕寬度並無關聯，這跟桌面上是相反的。我們稱該視口為布局視口。
它是使用者正在看到的**的區域，注意是**的區域（重要的事情說三遍）。使用者可以通過縮放來檢視**的內容。如果使用者縮小**，我們看到的**區域將變大，此時視覺視口也變大了，同理，使用者放大**，我們能看到的**區域將縮小，此時視覺視口也變小了。不管使用者如何縮放，都不會影響到布局視口的寬度。
預設情況下，乙個手機或平板瀏覽器的布局寬度為768-1024畫素。這對於手機的窄屏來說並不理想。換句話說，布局視口 的預設寬度並不是乙個理想的寬度。因此理想視口被引進了。
1<metaname="viewport" content="width=device-width">
這行**是通知瀏覽器，布局視口的寬度應該與理想視口寬度一致。這也說明了定義理想視口是瀏覽器的工作，而不是裝置或作業系統的工作。因此，同一裝置上的不同瀏覽器擁有不同的理想視口。瀏覽器的理想視口的大小也取決於它所處的裝置。
1、在桌面瀏覽器上，瀏覽器視窗與視口的寬度一致，而視口（css標準文件中稱為「初始包含塊」）是css百分比寬度推算的根源，因此，瀏覽器視窗是約束css布局的視口；
2、在手機上，有兩個視口，布局視口會限制css布局；視覺視口決定使用者看到的**內容；
3、移動端瀏覽器還有個理想視口，它是對特定裝置上的特定瀏覽器的布局視口的乙個理想尺寸；
4、可以把布局視口尺寸定義為理想視口。這也是響應式設計的基礎。
本文記錄學到的有關視口的內容，不足之處請指正。
有時會使用百分比來宣告寬度,如：
html,body{}
div
假設div是body的子元素，這段css就表示該div佔body寬度的30%.body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100%。同樣的，html也沒顯示宣告寬度，因此html也佔父包含塊的100%。等等.. html的父包含塊是什麼呢？是視口。
在css標準文件中稱為初始包含塊.這個初始包含塊是所有css百分比寬度推算的根源。
在桌面上，視口的寬度與瀏覽器視窗的寬度一致。除開margin和padding，html和body元素都與瀏覽器視窗的寬度一致。這就是為啥以上div占用了瀏覽器寬度的30%。
桌面上，視口與瀏覽器視窗的寬度一致，但在手機上，視口與移動端瀏覽器螢幕寬度是不關聯的。試想下，在小螢幕的移動端裝置下，如果使視口與移動端瀏覽器螢幕寬度一致，那麼佔body的30%的div在手機上展示的寬度看起來非常非常小，因此移動端瀏覽器廠商必須保證即使在窄螢幕下元素顯示的很好，因此需要將視口的寬度設計得比螢幕寬度寬出很多，這樣**會顯示得可以想象成如桌面上的那樣。但是，如果**沒有為移動端做優化，那麼瀏覽器會盡可能的縮小**讓使用者能看到**的全貌。
總結：在手機上，視口與螢幕寬度並無關聯，這跟桌面上是相反的。我們稱該視口為布局視口。
它是使用者正在看到的**的區域，注意是**的區域（重要的事情說三遍）。使用者可以通過縮放來檢視**的內容。如果使用者縮小**，我們看到的**區域將變大，此時視覺視口也變大了，同理，使用者放大**，我們能看到的**區域將縮小，此時視覺視口也變小了。不管使用者如何縮放，都不會影響到布局視口的寬度。
預設情況下，乙個手機或平板瀏覽器的布局寬度為768-1024畫素。這對於手機的窄屏來說並不理想。換句話說，布局視口 的預設寬度並不是乙個理想的寬度。因此理想視口被引進了。
1<metaname="viewport" content="width=device-width">
這行**是通知瀏覽器，布局視口的寬度應該與理想視口寬度一致。這也說明了定義理想視口是瀏覽器的工作，而不是裝置或作業系統的工作。因此，同一裝置上的不同瀏覽器擁有不同的理想視口。瀏覽器的理想視口的大小也取決於它所處的裝置。
1、在桌面瀏覽器上，瀏覽器視窗與視口的寬度一致，而視口（css標準文件中稱為「初始包含塊」）是css百分比寬度推算的根源，因此，瀏覽器視窗是約束css布局的視口；
2、在手機上，有兩個視口，布局視口會限制css布局；視覺視口決定使用者看到的**內容；
3、移動端瀏覽器還有個理想視口，它是對特定裝置上的特定瀏覽器的布局視口的乙個理想尺寸；
4、可以把布局視口尺寸定義為理想視口。這也是響應式設計的基礎。
移動端布局三種視口 移動端的三個視口
本文記錄學到的有關視口的內容，不足之處請指正。1 視口 有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度...
移動端web視口
移動前端中常說的 viewport 視口 就是瀏覽器顯示頁面內容的螢幕區域 總結首先看一下meta元標籤極其屬性 name viewport content width device width initial scale 1.0 maximum scale 1 user scalable no 這...
移動端web 視口
視口 viewport 問題 寫乙個div寬度為320px，使用手機端比如iphone4開啟，應該是佔滿的，但是看效果？答 並沒有佔滿一行，此時html標籤的寬度是980px。因為 瀏覽器在顯示移動端網頁時，會預設給予980px的布局空間 即 布局視口空間 什麼是視口？可以簡單理解為 瀏覽器給網頁布...