移動端的三個視口

本文記錄學到的有關視口的內容，不足之處請指正。

一、視口

有時會使用百分比來聲明寬度,如：

html,body{}

div{width:30%;}

 

假設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像素。這對於手機的窄屏來講並不理想。換句話說，佈局視口 的默認寬度並非一個理想的寬度。所以理想視口被引進了。

只有當網站是爲手機準備的時候才應該使用理想視口。當要添加理想視口，須要在頁面裏添加meta視口標籤，如：

<meta name="viewport" content="width=device-width">

這行代碼是通知瀏覽器，佈局視口的寬度應該與理想視口寬度一致。這也說明了定義理想視口是瀏覽器的工做，而不是設備或操做系統的工做。所以，同一設備上的不一樣瀏覽器擁有不一樣的理想視口。瀏覽器的理想視口的大小也取決於它所處的設備。

 

總結：

一、在桌面瀏覽器上，瀏覽器窗口與視口的寬度一致，而視口（CSS標準文檔中稱爲「初始包含塊」）是CSS百分比寬度推算的根源，所以，瀏覽器窗口是約束CSS佈局的視口；

二、在手機上，有兩個視口，佈局視口會限制CSS佈局；視覺視口決定用戶看到的網站內容；

三、移動端瀏覽器還有個理想視口，它是對特定設備上的特定瀏覽器的佈局視口的一個理想尺寸；

四、能夠把佈局視口尺寸定義爲理想視口。這也是響應式設計的基礎。