移動端視口的分類說明。在開始之前，先看一個典型的例子：
1 <meta name="viewport" content="width=device-width,initial-scale=1">
2 @media screen and (max-width:480px){
3 //寬度不超過480px時的樣式
4 } 上述代碼相信大家在做移動端開發時經常去書寫。它研究了兩個内容：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媒體查詢編寫一套針對移動端的展示方案。）
1 <meta name="device" content="width=device-width">
定義理想視口是浏覽器的工作，不是裝置或作業系統的工作。另外，建議大家在書寫meta視口時，應向本篇開始時的典型例子那樣書寫。
三、總結
本篇介紹了css像素和裝置像素。開發人員在開發中基本上使用的都是css像素。
介紹了三種視口
布局視口：不再與移動端浏覽器相關聯，完全是獨立的。實際上布局視口的寬度要比螢幕寬出很多。
視覺視口：使用者看到的網站展示區域，一般視覺視口和裝置寬度一緻。并且它的CSS像素的數量會随着使用者縮放而改變。
理想視口：為了使網站在移動端有最理想的浏覽和閱讀寬度而設定。需要手動添寫meta視口标簽通知浏覽器操作。使用它配合css媒體查詢制定移動端展示方案。