摘要：最終統(tǒng)籌一下我們要做的事情讓變成和屏幕分辨率一致的寬度根據(jù)設(shè)備寬度和來指明根元素的值這些操作之后你就可以實(shí)現(xiàn)最終的代碼了

屏幕是由一個(gè)一個(gè)顯示單元組成的.
1 每一個(gè)顯示單元都是物理世界真實(shí)存在的;
2 把一個(gè)顯示單元的大小稱為一個(gè)"物理像素";
3 通常我們所說的 "分辨率", 就是指一塊屏幕顯示單元的個(gè)數(shù), 比如
750*1334, 表示這塊屏幕由 750*1334 個(gè)顯示單元組成

像素是計(jì)算機(jī)系統(tǒng)里面的單位, 通常情況下, 我們讓一個(gè)像素對(duì)應(yīng)一個(gè)顯示單元. 所以有時(shí)候, 我們說屏幕高 667px, 實(shí)際上就是說, 屏幕的的高有 667個(gè)顯示單元的高度之和.

隨著技術(shù)的進(jìn)步, 顯示單元可以做的越來越小, 比如以前是 10mm*10mm 的一個(gè)顯示單元, 現(xiàn)在我們可以做到 5mm*5mm 一個(gè)顯示單元.
為什么追求顯示單元的小? 因?yàn)樵叫D像越精細(xì).

但是: 顯示單元的變小, 意味著屏幕的分辨率變大。

這里就牽涉到了一些事情:

假設(shè)屏幕的大小不變, 但是分辨率從 A, 變成 2A (也就是顯示單元縮小了一半)
并且: 一個(gè)像素對(duì)應(yīng)一個(gè)顯示單元, 這個(gè)規(guī)則始終不變

此時(shí), 你原來寬度為 100px 的一個(gè)元素, 在這個(gè) 2A 屏幕上渲染出來, 你會(huì)明顯的發(fā)現(xiàn):
在視覺上: 這個(gè) 100px 明顯比之前小了, 和之前的 50px 的時(shí)候一樣大小.

那怎么辦啊, 這樣顯示肯定是不可以的, 所以我們要對(duì)這個(gè)情況做處理:

1 我們規(guī)定, 大小為 n*n 的顯示單元, 是標(biāo)準(zhǔn)的顯示單元, 標(biāo)準(zhǔn)意味著它合乎我們長(zhǎng)久的判斷: 100px 在物理世界大概有多大.

2 我們要知道當(dāng)前屏幕的顯示單元, 和標(biāo)準(zhǔn)顯示單元之間的大小比例,比如說當(dāng)前屏幕的顯示單元的大小是標(biāo)準(zhǔn)的一半還是 三分之一.

通過 devicePixelRatio 屬性來獲

我們可以認(rèn)為:
devicePixelRatio 標(biāo)記是: 標(biāo)準(zhǔn)顯示單元/當(dāng)前設(shè)備的顯示單元

建立在上面的基礎(chǔ)上面, 你就可以動(dòng)態(tài)的調(diào)整元素的大小, 比如說某個(gè)元素 x 的寬度是 100px;

在 devicePixelRatio = 1 的設(shè)備上面寬度是 100px
在 devicePixelRatio = 2 的設(shè)備上面寬度就要是 200px;

ok, 那么我們來搞.
根據(jù)不同的 devicePixelRatio 來調(diào)整元素的樣式.

var box = document.querySelector(".box");

var height = parseInt(getComputedStyle(box).height);
var width = parseInt(getComputedStyle(box).width);

box.style.height = height * parseInt(window.devicePixelRatio) + "px";
box.style.width = width * parseInt(window.devicePixelRatio) + "px";

這僅僅是一個(gè)元素的兩個(gè)屬性, 1000個(gè)元素, 每個(gè)元素 5 個(gè)屬性, 就可以讓你哭掉了.
所以這種處理方式肯定是不可以的.

然后我們發(fā)現(xiàn)了 rem 單位.
它的簡(jiǎn)單解釋:

當(dāng)你給某個(gè)元素A 設(shè)置了 height:2rem 的時(shí)候
它會(huì)找到根節(jié)點(diǎn)(html) 的 font-size 值, 比如是 16px
然后拿 16 * 2 = 32px
作為元素A 的最終 height.

這個(gè)就可以利用了
1 讓元素使用 rem 作單位
2 然后控制根元素的 font-size 值, 在不同的 devicePixelRatio 下面的時(shí)候, 呈現(xiàn)不同的值
比如你可以設(shè)置:

devicePixelRatio = 1, font-size(root) = 100px;
devicePixelRatio = 2, font-size(root) = 200px;

元素在這個(gè)時(shí)候, 就會(huì)自動(dòng)響應(yīng)大小的變化.

好, 開始搞:

var fontSize = 100 * parseInt(window.devicePixelRatio) + "px";
document.documentElement.style.fontSize = fontSize;

嗯, 結(jié)果還是不錯(cuò)的, 在不同的分辨率下面, 我們也能實(shí)現(xiàn)頁面相同了.

實(shí)際上, 上面的討論, 已經(jīng)解決了我們的問題:
在相同物理尺寸下的設(shè)備, 如何在分辨率不同的情況下, 讓一個(gè) 100px 的元素, 它對(duì)應(yīng)的物理世界的
大小, 始終相同?

現(xiàn)在更近一步, 上面的討論, 固定了一個(gè)變量: 屏幕尺寸, 現(xiàn)在放開這個(gè)變量, 固定屏幕的分辨率這個(gè)變量.
這個(gè)問題就變成適配問題了:

場(chǎng)景描述:
比如你的一個(gè)頁面本來是以 375寬度為基礎(chǔ)做出來的, 那么在設(shè)備的寬度變成 320px 的時(shí)候,
你的頁面就會(huì)出現(xiàn)問題: 擠壓, 變形, 錯(cuò)亂, 或者超出隱藏, 超出滾動(dòng)等等操作.

怎么辦啊?
希望的是在 320 也能正常顯示: 讓頁面上的所有元素都縮小一些, 也就ok了. 比如一個(gè)元素
在 375 設(shè)備上面顯示這么大, 在 320 上面顯示成這么大不就行了.

那么如何縮小?
rem;
你想下, 只要在屏幕的寬度變小的時(shí)候, 讓根元素的 font-size 跟著變小, 那么所有使用 rem 作為單位的
元素, 是不是也跟著變小, 目標(biāo)就達(dá)成了.

那么怎么讓 font-size(root) 隨著屏幕的寬度變小而變小啊.

選一對(duì)基準(zhǔn)值, 比如: 375px/100px; 表示屏幕寬度為 375的時(shí)候, font-size(root) 為 100;

每次計(jì)算一下就好, 比如發(fā)現(xiàn)屏幕的當(dāng)前寬度為 320, 那么算不出來此時(shí)的 font-size(root) 嗎??
算出來不會(huì)設(shè)置根元素的 font-size 嗎?

好吧, 上面說的暫時(shí)都不要試, 先提一個(gè)事情.
所有的上面的討論, 實(shí)際上都建立在:

當(dāng)你屏幕的分辨率是 100100 的時(shí)候, 你就擁有一份 100100 大小的容器, 用來呈現(xiàn)你的網(wǎng)頁.
比如說, 你的 iPhone7 的分辨率是 6671334, 那么你就擁有一份 6671334 大小的容器來放你的網(wǎng)頁

可惜并不是這樣的.

從 iPhone 發(fā)布前夕說起:

開發(fā)人員發(fā)現(xiàn), 原本為 pc 開發(fā)的網(wǎng)頁
在 iPhone 上面顯示不全, 這部分可以通過滾動(dòng)條來解決.
但是使用 百分比布局的頁面就坑爹了, 原本在 pc 端瀏覽器上擁有
的 20% 在 iPhone 上面就一點(diǎn)點(diǎn)了, 布局完全亂了, 坑啊.
為了解決這個(gè)問題, 開發(fā)人員提出了一個(gè)的新的玩意: "layout viewport"

我該怎么解釋這個(gè)玩意呢.

    ==============  // 這個(gè)是你的百分比頁面所基于的寬度

    ===             // 這個(gè)是你屏幕的寬度

這樣一來, 頁面肯定會(huì)錯(cuò)亂. 所以提出的 layout viewport 把模型變成這樣:

    ==============  // 這個(gè)是你的百分比頁面所基于的寬度

    =============   // layout viewport 的寬度

    ===             // 這個(gè)是你屏幕的寬度

你的頁面會(huì)被放到 layout viewport 這個(gè)容器上面, 然后再將 layout viewport 縮小到
和屏幕寬度一樣的大小.
并且允許用戶放大頁面,通過滾動(dòng)條滑動(dòng)來瀏覽器全部頁面.

在最初的時(shí)候, 這種方式的確解決了 pc 端頁面在手機(jī)上瀏覽的問題, 但是隨著移動(dòng)端的興起,
大量的針對(duì)移動(dòng)端的頁面被制作出來, 也就是模型變成這樣:

    ===   // 針對(duì)移動(dòng)端做的頁面

    ============   // layout viewport 

    ===   // 屏幕的寬度

這樣很明顯就出現(xiàn)問題了: 你的頁面先放到 layout viewport 上面, 然后又縮小到和屏幕寬度一致
最終顯示出來的, 就是你的頁面明顯被縮小了.

所以我們要解決這個(gè)問題, 要把 layout viewport 的大小, 變成和屏幕的寬度一致.
這里假設(shè)屏幕的顯示單元始終是標(biāo)準(zhǔn)的顯示單元大小。

怎么讓 layout viewport 變成和屏幕的寬度一致呢?
通過 meta name="viewport" 標(biāo)簽.

解釋一下:
meta name="viewport" 有一個(gè) content 屬性, 它里面有幾個(gè)值, 可以用來對(duì) layout viewport
做處理. content 有如下幾個(gè)字段:

initial-scale: 這個(gè)值會(huì)影響最終 layout viewport 的寬度, 計(jì)算公式應(yīng)該是這樣:

屏幕的分辨率/(devicePixelRatio*initial-scale) = 最終的 layout viewport 的寬度. 

屏幕的分辨率我們可以拿到, devicePixelRatio 也可以拿到.
比如 iPhone7, 屏幕分辨率是 750*1334, devicePixelRatio=2, 當(dāng)你設(shè)置 initial-scale=1 的時(shí)候
layout viewport 的最終寬度就是 375;

這里有一個(gè)點(diǎn), 我說一下;
我們可以讓 layout viewport 的寬度是任意值, 通過對(duì) initial-scale 的設(shè)置.
那我們要設(shè)置它為多少呢?

可以設(shè)置成 375, 這個(gè)寬度, 是以標(biāo)準(zhǔn)顯示單元為單位算出來的寬度
也可以設(shè)置成 750, 這樣的話, 你的 1px 就完整對(duì)應(yīng)這個(gè)設(shè)備的 1 個(gè)顯示單元.

我們選擇后者, 因?yàn)檫@個(gè)牽涉到 1px border 的實(shí)現(xiàn).
如果設(shè)置成這個(gè), 那么你的 initial-scale 始終只要設(shè)置成 1/devicePixelRatio 即可,
因?yàn)?devicePixelRatio * 1/devicePixelRatio = 1;

還有其他的兩個(gè)相關(guān)屬性:
maximum-scale: 最大能放大多少
minimum-scale: 最小能放大多少

希望不能縮放, 因?yàn)槲覀兊捻撁娌恍枰s放就能正常顯示, 縮放了反而顯示不正確。

最終統(tǒng)籌一下:
我們要做的事情
1 讓 layout viewport 變成和屏幕分辨率一致的寬度
2 根據(jù)設(shè)備寬度和 devicePixelRatio 來指明根元素的 font-size 值

這些操作之后, 你就可以實(shí)現(xiàn)最終的代碼了.