題目同樣是 面試 會問到的一個常見問題之一男摧，同樣我們剛開始還是先 科普 一下 前置知識：
-
設(shè)備像素（device pixels）：物理像素蔬墩，顯示器的最小物理單位。
這里的一個像素耗拓，并不一定是一個小正方形區(qū)塊拇颅，也沒有標(biāo)準(zhǔn)的寬高，知識用于顯示豐富色彩的一個 “點(diǎn)” 而已乔询。 -
設(shè)備獨(dú)立像素（device independent pixels）：獨(dú)立于設(shè)備的像素樟插。
有一個非嚴(yán)謹(jǐn)?shù)恼f法，分辨率指的就是設(shè)備獨(dú)立像素竿刁』拼福可以通過 window.screen.width / window.screen.height 查看。平時我們所說的 iPhone X 邏輯分辨率 375 × 812 指的就是設(shè)備獨(dú)立像素食拜。chrome 檢查元素模擬調(diào)試手機(jī)設(shè)備時顯示如 375x667 和 320x480 都是設(shè)備獨(dú)立像素鸵熟。 - 像素分辨率：以手機(jī)屏幕為例，iPhone X 像素分辨率為 1125 × 2436负甸，是指屏幕橫向能顯示 1125 個物理像素點(diǎn)流强，縱向能顯示 2436 個物理像素點(diǎn)。通常所說的 4K 顯示屏指的是 4096 × 2160呻待。
-
PPI（pic per inch）：每英寸的物理像素?cái)?shù)煮盼。以尺寸為 5.8 英寸（屏幕對角線長度）、分辨率為 1125 × 2436 的 iPhone X 為例带污，
ppi = Math.sqrt(1125*1125 + 2436*2436) / 5.8僵控，值為 463 ppi。 -
CSS 像素：瀏覽器使用的單位鱼冀，用來精確度量網(wǎng)頁上的內(nèi)容报破，如：
div { width: 100px; }悠就。在一般情況下(頁面縮放比為 1)，1 個 CSS 像素等于 1 個設(shè)備獨(dú)立像素充易。 -
devicePixelRatio：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例梗脾。
window.devicePixelRatio = 物理像素 / 設(shè)備獨(dú)立像素。
當(dāng)設(shè)備像素比的比率不為 1 時盹靴，CSS 像素和設(shè)備獨(dú)立像素不再對應(yīng)炸茧。所以如果頁面放大 200%，1 個 CSS 像素等于 4 個設(shè)備獨(dú)立像素稿静。 -
窗口尺寸（CSS 像素）：
包含滾動條：window.innerWidthandwindow.innerHeight
不包含滾動條：document.documentElement.clientWidthanddocument.documentElement.clientHeight -
獲取 html 元素尺寸：
document.documentElement.offsetWidthanddocument.documentElement.offsetHeight -
CSS 中的 1px 并不等于設(shè)備的 1px：
CSS 中的像素是一個抽象單位梭冠，在不同的設(shè)備或者不同的環(huán)境中，CSS 中的 1px 所代表的設(shè)備物理像素是不同的改备。在為桌面瀏覽器設(shè)計(jì)網(wǎng)頁時控漠，無需對此考慮太多(往往 CSS 中的一個像素就是對應(yīng)著電腦屏幕的一個物理像素)，但是在移動設(shè)備上悬钳，必須搞清楚這一點(diǎn)盐捷。
1.在早先的移動設(shè)備中，屏幕像素密度都比較低默勾，一個像素確實(shí)是等于一個屏幕物理像素碉渡；后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高母剥，而我們的屏幕尺寸并沒有增大多少滞诺，這就意味著差不多同樣大小的屏幕上，像素多了一倍甚至不止一倍之多媳搪。
2.會引起不同的原因還可能是因?yàn)橛脩艨s放铭段，當(dāng)用戶將頁面放大一倍，CSS 中的 1px 所代表的物理像素也會增加一倍秦爆。
viewport
移動設(shè)備上的 viewport 是設(shè)備屏幕上用來顯示網(wǎng)頁的那部分區(qū)域序愚，再具體一點(diǎn)就是瀏覽器上用來顯示網(wǎng)頁的那部分區(qū)域，但 viewport 又不局限于瀏覽器可視區(qū)域的大小等限，它可能比瀏覽器的可視區(qū)域大爸吮，也可能比瀏覽器的可視區(qū)域小。在默認(rèn)情況下望门，移動設(shè)備上的 viewport 都是大于瀏覽器可視區(qū)域的形娇，這是因?yàn)橐苿釉O(shè)備的分辨率相對于PC來說都比較小，所以為了能在移動設(shè)備上正常顯示那些為PC瀏覽器設(shè)計(jì)的網(wǎng)站筹误，移動設(shè)備上的瀏覽器都會把自己默認(rèn)的 viewport 設(shè)為 980px 或 1024px（也可能是其它值桐早，由設(shè)備本身決定），但后果是瀏覽器出現(xiàn)橫向滾動條，因?yàn)闉g覽器可視區(qū)域的寬度比默認(rèn)的 viewport 的寬度小哄酝。
荷蘭前端大神 PPK 關(guān)于三個 viewport 的理論
移動設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示友存，即使是那些并不為移動設(shè)備設(shè)計(jì)的網(wǎng)站。因?yàn)橐苿釉O(shè)備的屏幕都不是很寬陶衅，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動設(shè)備上顯示時屡立，如果以瀏覽器的可視區(qū)域作為 viewport 的話，必然會因?yàn)橐苿釉O(shè)備的 viewport 太窄而擠作一團(tuán)搀军，甚至布局什么的都會亂掉膨俐。
現(xiàn)如今手機(jī)分辨率越來越高，比如：768×1024 甚至 1080×1920 等等罩句，分辨率這么高焚刺，用來顯示為桌面瀏覽器設(shè)計(jì)的網(wǎng)站有沒有問題呢？答案是肯定的的止，在前面科普前置知識的時候檩坚，我們已經(jīng)知道了着撩，1px CSS 像素并不一定代表屏幕上的 1px诅福，分辨率越大，CSS 中的 1px 代表的物理像素就會越多拖叙，devicePixelRatio 的值也越大氓润。以為分辨率增大了，但是屏幕尺寸并沒有變大多少薯鳍，必須讓 CSS 中的 1px 代表更多的物理像素咖气，才能讓 1px 的東西在屏幕上的大小與那些低分辨率的設(shè)備差不多，步然就會因?yàn)樘∨栋《床磺濉?/p>
如果把移動設(shè)備上的瀏覽器的可視區(qū)域設(shè)為 viewport 的話挖滤，某些網(wǎng)站就會因?yàn)?viewport 太窄而顯示錯亂崩溪。所以在默認(rèn)情況下，移動設(shè)備將 viewport 設(shè)為一個較寬的值斩松，比如 980px伶唯，這樣的話即使是那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站也能在移動設(shè)備瀏覽器顯示正常了，這個默認(rèn)的 viewport 值叫做 layout viewport惧盹。document.documentElement.clientWidth
layout viewport 的寬度是大于瀏覽器可視區(qū)域?qū)挾鹊娜樾遥晕覀冃枰粋€ viewport 來代表瀏覽器可視區(qū)域的大小：visual viewport钧椰。window.innerWidth Android 2,Oprea mini 和 UC 8 中無法獲取粹断。
移動網(wǎng)絡(luò)普及大眾，現(xiàn)在越來越多的網(wǎng)站都會為移動設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)嫡霞，此時必須有一個能夠完美適配移動設(shè)備的 viewport瓶埋。
完美適配：
- 不需要用戶縮放以及滾動橫向滾動條就能正常查看網(wǎng)站內(nèi)容；
- 顯示的文字大小合適，不會因?yàn)樵谝粋€高密度像素的屏幕顯示得太小而無法看清（圖片亦是如此）养筒。
瀏覽器所需要的完美適配 viewport狡汉，PPK 將它稱之為 ideal viewport（移動設(shè)備的理想 viewport）。它沒有固定尺寸闽颇，因?yàn)樗膶挾染褪且苿釉O(shè)備的屏幕寬度盾戴，不同的設(shè)備擁有不同的 ideal viewport。
無論在何種分辨率的屏幕下兵多，針對 ideal viewport 設(shè)計(jì)的網(wǎng)站尖啡，不需要用戶手動縮放，也不需要出現(xiàn)橫向滾動條剩膘，都可以完美得將頁面呈現(xiàn)給用戶衅斩。
meta viewport
要實(shí)現(xiàn) ideal viewport ，需要用到 meta 標(biāo)簽怠褐。
在 head 標(biāo)簽中加入 viewport 的 meta 標(biāo)簽：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度畏梆，同時不允許用戶手動縮放。當(dāng)然maximum-scale=1.0, user-scalable=0不是必需的奈懒，是否允許用戶手動播放根據(jù)網(wǎng)站的需求來定奠涌，但把width設(shè)為width-device基本是必須的，這樣能保證不會出現(xiàn)橫向滾動條磷杏。
meta viewport 的六個屬性
- width：控制 viewport 的大小溜畅，可以給它指定一個值(正整數(shù))，或者是一個特殊的值(如：device-width 設(shè)備獨(dú)立像素寬度极祸，單位縮放為 1 時)慈格；
- initial-scale：初始縮放比例，即當(dāng)頁面第一次加載時的縮放比例遥金，為一個數(shù)字(可以帶小數(shù))浴捆；
- maximum-scale：允許用戶縮放到的最大比例，為一個數(shù)字(可以帶小數(shù))稿械；
- minimum-scale：允許用戶縮放到的最小比例选泻，為一個數(shù)字(可以帶小數(shù))；
- user-scalable：是否允許用戶手動縮放溜哮，值為 "no"(不允許) 或 "yes"(允許)滔金；
- height：與 width 相對應(yīng)(很少使用)。
總結(jié)
meta viewport 是用于適配移動設(shè)備的茂嗓，為了使不管是什么寬度的頁面都能在移動設(shè)備端得到完美適配（不需要用戶縮放和滾動橫向滾動條并且字體圖片等顯示正常）餐茵。
如果不知道設(shè)備的理想寬度就用特殊值 device-width，同時 initial-scale=1 來的到一個理想的 viewport (ideal viewport)述吸。
實(shí)際上忿族，現(xiàn)在市面上雖然有那么多不同種類不同品牌不同分辨率的手機(jī)锣笨，但它們的理想viewport寬度歸納起來無非也就 320、360道批、384错英、400等幾種，都是非常接近的隆豹，理想寬度的相近也就意味著我們針對某個設(shè)備的理想viewport而做出的網(wǎng)站椭岩，在其他設(shè)備上的表現(xiàn)也不會相差非常多甚至是表現(xiàn)一樣的。
