視口（viewport）

講述meta視口標(biāo)簽和媒體查詢相關(guān)的內(nèi)容。

示例代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
    // some style
}

像素（pixel）

• 設(shè)備像素：設(shè)備屏幕的物理像素。
• CSS像素：為Web開發(fā)者創(chuàng)造的，在CSS和JS中使用的一個抽象層。

CSS像素和設(shè)備像素的比例取決于屏幕是否高DPI和用戶縮放的比例。

三個視口

桌面上視口寬度等于瀏覽器寬度，但在手機上有所不同。

• 布局視口。手機上為了容納為桌面瀏覽器設(shè)計的網(wǎng)站，默認布局視口寬度遠大于屏幕寬度，為了讓用戶看到網(wǎng)站全貌，它會縮小網(wǎng)站。
• 視覺視口。用戶正在看到的網(wǎng)站的區(qū)域，與設(shè)備屏幕一樣寬。
• 理想視口。當(dāng)網(wǎng)站是為手機準(zhǔn)備的時候使用。使用meta聲明。早期iPhone理想視口為320*480px。

縮放

桌面瀏覽器的縮放僅改變內(nèi)容尺寸，不改變布局視口；移動端縮放則整體改變。

不要禁止縮放。

<meta name="viewport" content="user-scalable=no">

禁止縮放是邪惡的，并且瀏覽器可以關(guān)閉禁止縮放功能。

分辨率

物理分辨率：設(shè)備每英寸內(nèi)點數(shù)（DPI）。

設(shè)備像素比：設(shè)備像素個數(shù)和理想視口的比（DPR）。

dppx和dpi：每一個像素的點數(shù)。JS中的window.devicePixelRatio和媒體查詢的device-pixel-ratio的單位。IE不支持，因此要使用dpi單位：

if(window.devicePixelRatio) {
    // DPR大于等于2時執(zhí)行
}

@media all and((-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi)) {
    // DPR大于等于2時生效
}

1dppx = 96dpi：一英寸對應(yīng)CSS中96個像素。

meta視口

<meta name="viewport" content="name=value,name=value">

其中可用的name為：

• width：device-width適用于大多數(shù)情況。
• initial-scale：一般設(shè)為1，為了兼容應(yīng)同時設(shè)置width=device-width。
• minimum-scale
• maximum-scale
• user-scalable

媒體查詢

媒體類型：目前只有print被正確實現(xiàn)。一般使用all。

Web開發(fā)者希望區(qū)分能力弱和能力強的瀏覽器，而弱瀏覽器為了避免探測開始偽裝自己。

過去的瀏覽器最多可處理WAP和HTML的子集XHTML-MP，它們大都遵循標(biāo)準(zhǔn)并實現(xiàn)handheld，Web開發(fā)者為這些類型提供簡單的樣式。而新的現(xiàn)代移動瀏覽器出現(xiàn)后，它們支持全部樣式、JS，因此寧愿不實現(xiàn)handheld而獲得和桌面瀏覽器一樣的待遇。

JavaScript

媒體查詢與JavaScript屬性相對應(yīng)。

• 物理屏幕分辨率：screen.width/height（有兼容問題不建議使用）
• 布局視口：document.documentElement.clientWidth
• 視覺視口：window.innerWidth
• 理想視口：screen.width/height（有兼容問題不建議使用）
• 設(shè)備像素比：window.devicePixelRatio
• 屏幕方向：window.orientation