講述meta視口標(biāo)簽和媒體查詢(xún)相關(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開(kāi)發(fā)者創(chuàng)造的，在CSS和JS中使用的一個(gè)抽象層。

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

三個(gè)視口

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

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

縮放

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

不要禁止縮放。

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

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

分辨率

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

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

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

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

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

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

meta視口

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

其中可用的name為：

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

媒體查詢(xún)

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

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

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

JavaScript

媒體查詢(xún)與JavaScript屬性相對(duì)應(yīng)。

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