講述meta視口標簽和媒體查詢相關的內容。
示例代碼：
~~~
<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
// some style
}
~~~
## 像素（pixel）
* 設備像素：設備屏幕的物理像素。
* CSS像素：為Web開發者創造的，在CSS和JS中使用的一個抽象層。
CSS像素和設備像素的比例取決于屏幕是否高DPI和用戶縮放的比例。
## 三個視口
桌面上視口寬度等于瀏覽器寬度，但在手機上有所不同。
* 布局視口。手機上為了容納為桌面瀏覽器設計的網站，默認布局視口寬度遠大于屏幕寬度，為了讓用戶看到網站全貌，它會縮小網站。
* 視覺視口。用戶正在看到的網站的區域，與設備屏幕一樣寬。
* 理想視口。當網站是為手機準備的時候使用。使用meta聲明。早期iPhone理想視口為320*480px。
## 縮放
桌面瀏覽器的縮放僅改變內容尺寸，不改變布局視口；移動端縮放則整體改變。
> 不要禁止縮放。
~~~
<meta name="viewport" content="user-scalable=no">
~~~
禁止縮放是邪惡的，并且瀏覽器可以關閉禁止縮放功能。
## 分辨率
物理分辨率：設備每英寸內點數（DPI）。
設備像素比：設備像素個數和理想視口的比（DPR）。
dppx和dpi：每一個像素的點數。JS中的`window.devicePixelRatio`和媒體查詢的`device-pixel-ratio`的單位。IE不支持，因此要使用dpi單位：
~~~
if(window.devicePixelRatio) {
// DPR大于等于2時執行
}
@media all and((-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi)) {
// DPR大于等于2時生效
}
~~~
1dppx = 96dpi：一英寸對應CSS中96個像素。
## meta視口
~~~
<meta name="viewport" content="name=value,name=value">
~~~
其中可用的name為：
* width：device-width適用于大多數情況。
* initial-scale：一般設為1，為了兼容應同時設置width=device-width。
* minimum-scale
* maximum-scale
* user-scalable
## 媒體查詢
媒體類型：目前只有print被正確實現。一般使用all。
> Web開發者希望區分能力弱和能力強的瀏覽器，而弱瀏覽器為了避免探測開始偽裝自己。
>
> 過去的瀏覽器最多可處理WAP和HTML的子集XHTML-MP，它們大都遵循標準并實現handheld，Web開發者為這些類型提供簡單的樣式。而新的現代移動瀏覽器出現后，它們支持全部樣式、JS，因此寧愿不實現handheld而獲得和桌面瀏覽器一樣的待遇。
## JavaScript
媒體查詢與JavaScript屬性相對應。
* 物理屏幕分辨率：screen.width/height（有兼容問題不建議使用）
* 布局視口：document.documentElement.clientWidth
* 視覺視口：window.innerWidth
* 理想視口：screen.width/height（有兼容問題不建議使用）
* 設備像素比：window.devicePixelRatio
* 屏幕方向：window.orientation
