先動(dòng)手

創(chuàng)建一個(gè)頁面，一個(gè)DIV寬200高100。不添加viewport。

添加Viewport標(biāo)簽 <meta name="viewport" content="width=device-width,inital-scale=1,minimum-scale,maximum=1,user-scalable=no">

通過設(shè)置viewport寬度等于設(shè)備寬度。不縮放頁面，這樣dpi肯定和設(shè)備上的真實(shí)分辨率是一樣的，不做任何縮放。

viewport概念

viewport是設(shè)備上用來顯示網(wǎng)頁的那一塊區(qū)域比屏幕寬。手機(jī)瀏覽器把網(wǎng)頁放入到一個(gè)虛擬的“窗口（viewport）”中。用戶可以通過平易或收縮看不同部分。

viewport理解

viewport以手機(jī)端chrome為例可視區(qū)域?qū)挾葹?68px，是一個(gè)固定值。

參數(shù)

<meta name="viewport" content="width=device-width,inital-scale=1,minimum-scale,maximum=1,user-scalable=no">

width：控制 viewport 的大小，你可以給它指定一個(gè)值，如：600，或者甚至還可以給它一個(gè)特殊的值，如：device-width，device-width為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
height：與 width 相對(duì)應(yīng)，指定viewport 高度。
initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：是否允許用戶手動(dòng)縮放。