響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)：DPR 與 viewport

時(shí)間：2022-07-28 14:51:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-07-28 14:51:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

響應(yīng)式設(shè)計(jì)與開(kāi)發(fā)中，有兩個(gè)重要的概念，一直會(huì)貫穿整個(gè)流程，但又有很多人搞不清楚。它們就是 DPR 與 viewport，下面讓我們看看這兩個(gè)概念。

什么是 DPR？

我們知道在 Chrome 瀏覽器控制臺(tái) console 中輸入

window.devicePixelRatio 可以獲取當(dāng)前屏幕的 DPR。

那么什么是 DPR (Device Pixel Ratio)？這里不妨先給它個(gè)定義：window.devicePixelRatio 是設(shè)備上物理像素 (physical pixels) 和設(shè)備無(wú)關(guān)像素 (device-independent pixels (dips)) 的比例。公式表示就是：window.devicePixelRatio = physical pixels / dips

這個(gè)定義里的 dips 并不太好理解，現(xiàn)在我們嘗試通過(guò)下面幾點(diǎn)來(lái)搞明白：

• 首先，dips 是一種度量單位
• 然后，要知道瀏覽器并不是根據(jù)物理硬件的像素來(lái)工作的，而是根據(jù) dips 寬度來(lái)工作。
• 最后，還要知道 dips 是將像素值與實(shí)際距離聯(lián)系起來(lái)的，不管屏幕的像素密度是多少，dips 為 1px，那么實(shí)際寬度就是 1px，也就是對(duì)應(yīng) CSS 中的 1px，而不是對(duì)應(yīng)物理像素 1px。

這里我們就可以看到，1px 并不總是等于 1px。

搞明白 dips，我們舉個(gè)簡(jiǎn)單例子，MacBook Pro 13.3 英寸的顯示器分辨率是 2560 x 1600，這個(gè) 2560px 就是我們前面說(shuō)的設(shè)備上的物理像素值，而瀏覽器全屏顯示的寬度只有 1280px，這個(gè)就是 dips 值，最終可以知道這臺(tái) MacBook Pro 電腦屏幕的 DPR 為 2，DPR 在這里所表達(dá)的意思就是：1280 dips 在實(shí)際顯示的時(shí)候，被硬件擴(kuò)展到了 2560 的硬件像素寬度，2 個(gè)物理像素對(duì)應(yīng) 1 個(gè) CSS 像素（這個(gè)指的水平方向或垂直方向，如果在一個(gè)平面內(nèi)的話 4 個(gè)物理像素點(diǎn)對(duì)應(yīng) 1 個(gè) CSS 像素點(diǎn)）。

如果現(xiàn)在上面這臺(tái)電腦里有一張實(shí)際寬度為 200px 的高清圖片，在瀏覽器里被 css 設(shè)置寬度為 200px，那么這張圖片看起來(lái)就會(huì)有點(diǎn)模糊，因?yàn)樗鼘?shí)際被硬件擴(kuò)展到了 400px 的硬件像素寬度，是它實(shí)際寬度的兩倍。但是，如果它被 css 設(shè)置寬度為 100px，這時(shí)候它實(shí)際被硬件擴(kuò)展到了 200px 的硬件像素寬度，和它實(shí)際像素一致，就不會(huì)模糊了。

響應(yīng)式的第一步：設(shè)置 viewport

我們知道響應(yīng)式網(wǎng)站通常要正確設(shè)置名稱為 viewport 的 meta 信息，才可以正常顯示。例如最常用的 viewport 設(shè)置方法：




<meta name="viewport" content="width=device-width, initial-scale=1">那么什么是 viewport？

viewport 通常是指用戶網(wǎng)頁(yè)的可視區(qū)域，簡(jiǎn)稱”視區(qū)“。但是我們這里討論的 viewport 不僅是這個(gè)概念。我們不妨把 viewport 分為 layout viewport、visual viewport 和 ideal viewport 三個(gè)概念。

在移動(dòng)設(shè)備上，layout viewport 并不局限于瀏覽器可視區(qū)域 visual viewport 的大小，可以比瀏覽器的可視區(qū)域大，也可以比瀏覽器的可視區(qū)域小。默認(rèn)情況下的 viewport 是 layout viewport，它的寬度通常大于瀏覽器可視區(qū)域，也可以說(shuō)是大于移動(dòng)設(shè)備的 dips 寬度。

需要注意的是，這個(gè)沒(méi)有設(shè)置任何 viewport 相關(guān) meta 的情況下，如果當(dāng)前頁(yè)面的 layout viewport 大于移動(dòng)設(shè)備的 dips 寬度，為了使得頁(yè)面不出現(xiàn)橫向滾動(dòng)條，提高用戶體驗(yàn)，移動(dòng)設(shè)備通常會(huì)自動(dòng)給整個(gè)網(wǎng)頁(yè)設(shè)置一個(gè)默認(rèn)的縮放值來(lái)縮小頁(yè)面。這就是為什么我們看到一些不是響應(yīng)式的網(wǎng)站在移動(dòng)設(shè)備如 iphone 和 ipad 中會(huì)以整體縮小到剛好布滿整個(gè)屏幕的形式展現(xiàn)。

對(duì)于已經(jīng)做好響應(yīng)式的站點(diǎn)，默認(rèn)的 layout viewport 寬度就不合時(shí)宜了，因?yàn)檫@些站點(diǎn)經(jīng)過(guò)優(yōu)化在移動(dòng)設(shè)備寬度下也可以正常顯示，這時(shí)候我們需要一個(gè) ideal viewport，可以通過(guò) width=device-width 來(lái)設(shè)置 layout viewport 等于設(shè)備的 dips 寬度來(lái)獲得 ideal viewport。

但是還不夠，在 iphone 和 ipad 上，無(wú)論你給 viewport 設(shè)的寬度是多少，如果沒(méi)有指定默認(rèn)的縮放值，則 iphone 和 ipad 會(huì)自動(dòng)計(jì)算這個(gè)縮放值，以達(dá)到當(dāng)前頁(yè)面不會(huì)出現(xiàn)橫向滾動(dòng)條的目的。所以我們還要設(shè)置 initial-scale=1 來(lái)保證網(wǎng)頁(yè)在瀏覽器中一開(kāi)始就根據(jù)屏幕尺寸 1：1 縮放或擴(kuò)大。需要注意的是，設(shè)置 initial-scale=1 其實(shí)是讓 dips 像素與 CSS 像素的比例達(dá)到 1：1。單獨(dú)通過(guò)這個(gè)設(shè)置也會(huì)把當(dāng)前的 viewport 變?yōu)?ideal viewport。

更多 viewport 的設(shè)置可以參考 W3C viewport 或參考下表，通常情況下，設(shè)置上面兩個(gè)即可且是必須的。

補(bǔ)充：什么是 ppi（Pixels Per Inch）

要補(bǔ)充這個(gè)問(wèn)題是因?yàn)?，有個(gè)問(wèn)題可能會(huì)困擾到你：在 viewport 縮放比例都為 1 （或縮放比例相同即可）的情況下，為什么同樣大小的字體（比如16px）或者同一個(gè) app 的 icon 在不同的移動(dòng)設(shè)備下人眼看起來(lái)的大小不一樣？

這個(gè)問(wèn)題其實(shí)和 PPI 和 DPR 兩者都密切相關(guān)。前面我們已經(jīng)知道了什么是 DPR，那么什么是 PPI 呢？

PPI 即像素密度，表示每英寸所擁有的像素?cái)?shù)量。

同樣大小的字體在不同設(shè)備為什么看起來(lái)大小不一樣，本質(zhì)上就是問(wèn)一個(gè) dips 像素在不同設(shè)備中分別等價(jià)于多少英寸。首先假設(shè) viewport 縮放比例都為 1（即 ideal viewport），然后我們知道每個(gè)物理像素等于 1/PPI 英寸，那么一個(gè) dips 像素（此時(shí)對(duì)應(yīng)一個(gè) CSS 像素）對(duì)應(yīng)的物理像素就是 DPR 個(gè)，那么一個(gè) dips 像素的長(zhǎng)度就可以由 DPR * (1/PPI) = DPR/PPI 計(jì)算出來(lái)。

舉個(gè)例子：iphone7 PPI 為 326，DPR 為 2，DPR/PPI 約等于 0.00613497，而 iphone7 plus PPI 為401，DPR 為 3，DPR/PPI 約等于 0.0074813；所以 iphone7 plus 上的 app 圖標(biāo)和字比 iphone7 要大。

參考文章：

devicePixelRatio
A pixel is not a pixel is not a pixel
A tale of two viewports — part one
A tale of two viewports — part two
Meta viewport
在移動(dòng)瀏覽器中使用viewport元標(biāo)簽控制布局
快捷提示：別忘記Viewport Meta標(biāo)簽

▲ 本文作者：金運(yùn)墨（@tedlife ），中國(guó)礦業(yè)大學(xué)數(shù)學(xué)系畢業(yè)，就職于freelancer。前端開(kāi)發(fā)納米學(xué)位進(jìn)行中，現(xiàn)已成為編程入門課導(dǎo)師。