本篇主要是記錄一下移動端視口的分類說明和其它的一些知識。在開始之前，先看一個典型的例子：
<meta name="viewport" content="width=device-width,initial-scale=1"> @media screen and (max-width:480px){ //寬度不超過480px是的樣式 }
上述代碼相信大家在做移動端開發時經常去書寫。它研究了兩個內容：meta視口和寬度媒體查詢。通常我們都會稱上述代碼為CSS3的媒體查詢功能。使用媒體查詢功能能夠解決針對桌面級的web設計在移動端不同尺寸下的兼容展現。
一、像素
研究視口之前，先說明一下像素。像素是網頁布局的基礎，web開發者憑直覺使用它。
一個像素就是計算機屏幕能顯示一特定顏色的最小區域。
實際上，有以下兩種像素
- 設備像素：設備屏幕的物理像素，任何設備的物理像素的數量都是固定的。
- CSS像素：為Web開發者創造的，在CSS（和JavaScript）中使用的一個抽象的層。
說明一下：web開發過程中，我們基本使用的都是CSS像素，設備像素基本不會用。例如：width:200px 的元素跨越了 200 個CSS像素。CSS像素相當於多少個設備像素取決於屏幕的特性（是否高密度）和用戶進行的縮放。當用戶放大的越大，一個CSS像素覆蓋的設備像素就越多，因此這個元素不一定會跨越css設置等值的設備像素。在舊的屏幕上，當縮放程度為100%時，一個CSS像素等於一個設備像素。在高密度屏幕上，例如蘋果的視網膜屏幕，一個CSS像素跨越了多個設備像素。對照下圖：
（紅色表示CSS像素、藍色表示設備像素）
我們在開發中，操作的是CSS像素，讓CSS像素去覆蓋設備像素。不過當我們使用CSS和JavaScript的時候，其實並不會在意一個CSS像素跨越了多少個設備像素。這個依賴於屏幕特性和用戶縮放程度的計算由瀏覽器完成。
二、三個視口
我們經常在開發中會使用到例如width:35%這樣的代碼去布局。它表示占用父元素的百分比寬度。我們看html文檔結構知道最外層的一層是html元素。那么html元素的包含塊是什么？這就是要說得視口了。在CSS標准文檔中，它被稱為初始包含塊。這個初始包含塊是所有CSS百分比寬度推算的根源。（在桌面上，視口的寬度和瀏覽器窗口的寬度一致）。
1.布局視口
移動端設備如果使用視口的寬度和瀏覽器窗口寬度一樣會導致很丑陋的結果。想象一下。一個針對桌面級的左右結構頁面布局，左側站瀏覽器窗口的20%，右側占80%。這樣的頁面在我們小屏幕的移動端設備上會縮放的非常小。也許會導致大部分數據重疊覆蓋，也可能導致數據遮擋無法顯示全部。
所以，移動端瀏覽器廠商必須保證即使在窄屏幕下我們的頁面可以展示的很好，他們將視口的寬度設計得比屏幕寬度寬出很多。這樣。在移動端，視口與移動端瀏覽器屏幕寬度就不再關聯，而是完全獨立的了。我們稱它為 布局視口。CSS布局會根據它來計算並被約束。
看下面的圖例，體會一下布局視口
2.視覺視口
雖然獨立的布局視口很大程度上幫助了桌面網站過渡到手機上。但我們不能完全忽視移動設備上的屏幕尺寸。所以該說明一下視覺視口了。
視覺視口是用戶正在看到的網站的區域。用戶可以通過縮放來操作視覺視口，同時不會影響布局視口。布局視口還是保持在原來的寬度。
看下圖說明一下視覺視口區域
如上圖，紅色箭頭之間的區域就是視覺視口的區域。它和設備的屏幕一樣寬，並且它的CSS像素的數量會隨着用戶縮放而改變。
3.理想視口
布局視口的默認寬度並不是一個理想的寬度。顯然用戶希望在進入頁面時可以不需要縮放就可以有一個理想的瀏覽和閱讀尺寸。理想視口仍是為移動端設備准備的。只有手動添加meta視口標簽方才生效。如果沒有meta視口標簽，那么布局將會維持它的默認寬度。
如下代碼，告訴瀏覽器，布局視口的寬度應該與理想視口的寬度一致。（一般來講我們都會將布局視口的寬度設為設備寬度一樣，然后使用css媒體查詢編寫一套針對移動端的展示方案。）
<meta name="device" content="width=device-width">
定義理想視口是瀏覽器的工作，不是設備或操作系統的工作。另外，建議大家在書寫meta視口時，應向本篇開始時的典型例子那樣書寫。
三、總結
本篇介紹了css像素和設備像素。開發人員在開發中基本上使用的都是css像素。
介紹了三種視口
布局視口：不再與移動端瀏覽器相關聯，完全是獨立的。實際上布局視口的寬度要比屏幕寬出很多。
視覺視口：用戶看到的網站展示區域，一般視覺視口和設備寬度一致。並且它的CSS像素的數量會隨着用戶縮放而改變。
理想視口：為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定。需要手動添寫meta視口標簽通知瀏覽器操作。使用它配合css媒體查詢制定移動端展示方案。
關於視口這一塊內容，只是整理了本人可以理解的部分內容。方便在開發中可以理解一些東西。不過以前學習的時候還介紹了設備像素比之類的判定的諸多內容。因為我在開發中基本沒有使用過。所以也就忽略了。還是先搞懂能夠懂的東西。如有錯誤，歡迎指正。
感謝閱讀。