摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為，那它每英寸約含有個物理像素點。

導讀

移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題：

1px問題

UI圖完美適配方案

iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... 上面這些問題可能我們在開發中已經知道如何解決，但是問題產生的原理，以及解決方案的原理可能會模糊不清。在解決這些問題的過程中，我們往往會遇到非常多的概念：像素、分辨率、

PPI、

DPI、

DP、

DIP、

DPR、視口等等，你真的能分清這些概念的意義嗎？

本文將從移動端適配的基礎概念出發，探究移動端適配各種問題的解決方案和實現原理。

一、英寸

一般用英寸描述屏幕的物理大小，如電腦顯示器的

17、

22，手機顯示器的

4.8、

5.7等使用的單位都是英寸。

需要注意，上面的尺寸都是屏幕對角線的長度：

?

?

英寸(

inch,縮寫為

in)在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。

英寸和厘米的換算：

1英寸 = 2.54 厘米

二、分辨率

2.1 像素

像素即一個小方塊，它具有特定的位置和顏色。

圖片、電子屏幕（手機、電腦）就是由無數個具有特定顏色和特定位置的小方塊拼接而成。

像素可以作為圖片或電子屏幕的最小組成單位。

下面我們使用

sketch打開一張圖片：

?

?

將這些圖片放大即可看到這些像素點：

?

?

通常我們所說的分辨率有兩種，屏幕分辨率和圖像分辨率。

2.2 屏幕分辨率

屏幕分辨率指一個屏幕具體由多少個像素點組成。

下面是

apple的官網上對手機分辨率的描述：

?

?

iPhone XS Max 和

iPhone SE的分辨率分別為

2688 x 1242和

1136 x 640。這表示手機分別在垂直和水平上所具有的像素點數。

當然分辨率高不代表屏幕就清晰，屏幕的清晰程度還與尺寸有關。

2.3 圖像分辨率

我們通常說的

圖片分辨率其實是指圖片含有的

像素數，比如一張圖片的分辨率為

800 x 400。這表示圖片分別在垂直和水平上所具有的像素點數為

800和

400。

同一尺寸的圖片，分辨率越高，圖片越清晰。

?

?

2.4 PPI

PPI(Pixel Per Inch)：每英寸包括的像素數。

PPI可以用于描述屏幕的清晰度以及一張圖片的質量。

使用

PPI描述圖片時，

PPI越高，圖片質量越高，使用

PPI描述屏幕時，

PPI越高，屏幕越清晰。

在上面描述手機分辨率的圖片中，我們可以看到：

iPhone XS Max 和

iPhone SE的

PPI分別為

458和

326，這足以證明前者的屏幕更清晰。

由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算

PPI:

iPhone 6的

PPI為 ，那它每英寸約含有

326個物理像素點。

2.5 DPI

DPI(Dot Per Inch)：即每英寸包括的點數。

這里的點是一個抽象的單位，它可以是屏幕像素點、圖片像素點也可以是打印機的墨點。

平時你可能會看到使用

DPI來描述圖片和屏幕，這時的

DPI應該和

PPI是等價的，

DPI最常用的是用于描述打印機，表示打印機每英寸可以打印的點數。

一張圖片在屏幕上顯示時，它的像素點數是規則排列的，每個像素點都有特定的位置和顏色。

當使用打印機進行打印時，打印機可能不會規則的將這些點打印出來，而是使用一個個打印點來呈現這張圖像，這些打印點之間會有一定的空隙，這就是

DPI所描述的：打印點的密度。

?

?

在上面的圖像中我們可以清晰的看到，打印機是如何使用墨點來打印一張圖像。

所以，打印機的

DPI越高，打印圖像的精細程度就越高，同時這也會消耗更多的墨點和時間。

三、設備獨立像素

實際上，上面我們描述的像素都是

物理像素，即設備上真實的物理單元。

下面我們來看看

設備獨立像素究竟是如何產生的：

智能手機發展非常之快，在幾年之前，我們還用著分辨率非常低的手機，比如下面左側的白色手機，它的分辨率是

320x480，我們可以在上面瀏覽正常的文字、圖片等等。

但是，隨著科技的發展，低分辨率的手機已經不能滿足我們的需求了。很快，更高分辨率的屏幕誕生了，比如下面的黑色手機，它的分辨率是

640x940，正好是白色手機的兩倍。

理論上來講，在白色手機上相同大小的圖片和文字，在黑色手機上會被縮放一倍，因為它的分辨率提高了一倍。這樣，豈不是后面出現更高分辨率的手機，頁面元素會變得越來越小嗎？

?

?

然而，事實并不是這樣的，我們現在使用的智能手機，不管分辨率多高，他們所展示的界面比例都是基本類似的。喬布斯在

iPhone4的發布會上首次提出了

Retina Display(視網膜屏幕)的概念，它正是解決了上面的問題，這也使它成為一款跨時代的手機。

?

?

在

iPhone4使用的視網膜屏幕中，把

2x2個像素當

1個像素使用，這樣讓屏幕看起來更精致，但是元素的大小卻不會改變。

?

?

如果黑色手機使用了視網膜屏幕的技術，那么顯示結果應該是下面的情況，比如列表的寬度為

300個像素，那么在一條水平線上，白色手機會用

300個物理像素去渲染它，而黑色手機實際上會用

600個物理像素去渲染它。

我們必須用一種單位來同時告訴不同分辨率的手機，它們在界面上顯示元素的大小是多少，這個單位就是設備獨立像素(

Device Independent Pixels)簡稱

DIP或

DP。上面我們說，列表的寬度為

300個像素，實際上我們可以說：列表的寬度為

300個設備獨立像素。

?

?

打開

chrome的開發者工具，我們可以模擬各個手機型號的顯示情況，每種型號上面會顯示一個尺寸，比如

iPhone X顯示的尺寸是

375x812，實際

iPhone X的分辨率會比這高很多，這里顯示的就是設備獨立像素。

?

?

3.1 設備像素比

設備像素比

device pixel ratio簡稱

dpr，即物理像素和設備獨立像素的比值。

在

web中，瀏覽器為我們提供了

window.devicePixelRatio來幫助我們獲取

dpr。

在

css中，可以使用媒體查詢

min-device-pixel-ratio，區分

dpr：

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }
復制代碼

在

React Native中，我們也可以使用

PixelRatio.get()來獲取

DPR。

當然，上面的規則也有例外，

iPhone 6、7、8 Plus的實際物理像素是

1080 x 1920，在開發者工具中我們可以看到：它的設備獨立像素是

414 x 736，設備像素比為

3，設備獨立像素和設備像素比的乘積并不等于

1080 x 1920，而是等于

1242 x 2208。

實際上，手機會自動把

1242 x 2208個像素點塞進

1080 * 1920個物理像素點來渲染，我們不用關心這個過程，而

1242 x 2208被稱為屏幕的

設計像素。我們開發過程中也是以這個

設計像素為準。

實際上，從蘋果提出視網膜屏幕開始，才出現設備像素比這個概念，因為在這之前，移動設備都是直接使用物理像素來進行展示。

緊接著，

Android同樣使用了其他的技術方案來實現

DPR大于

1的屏幕，不過原理是類似的。由于

Android屏幕尺寸非常多、分辨率高低跨度非常大，不像蘋果只有它自己的幾款固定設備、尺寸。所以，為了保證各種設備的顯示效果，

Android按照設備的像素密度將設備分成了幾個區間：

?

?

當然，所有的

Android設備不一定嚴格按照上面的分辨率，每個類型可能對應幾種不同分辨率，所以，每個

Android手機都能根據給定的區間范圍，確定自己的

DPR，從而擁有類似的顯示。當然，僅僅是類似，由于各個設備的尺寸、分辨率上的差異，設備獨立像素也不會完全相等，所以各種

Android設備仍然不能做到在展示上完全相等。

3.2 移動端開發

在

iOS、

Android和

React Native開發中樣式單位其實都使用的是設備獨立像素。

iOS的尺寸單位為

pt，

Android的尺寸單位為

dp，

React Native中沒有指定明確的單位，它們其實都是設備獨立像素

dp。

在使用

React Native開發

App時，

UI給我們的原型圖一般是基于

iphone6的像素給定的。

為了適配所有機型，我們在寫樣式時需要把物理像素轉換為設備獨立像素：例如：如果給定一個元素的高度為

200px(這里的

px指物理像素，非

CSS像素)，

iphone6的設備像素比為

2，我們給定的

height應為

200px/2=100dp。

當然，最好的是，你可以和設計溝通好，所有的

UI圖都按照設備獨立像素來出。

我們還可以在代碼(

React Native)中進行

px和

dp的轉換：

import {PixelRatio } from "react-native";

const dpr = PixelRatio.get();

/**
 * px轉換為dp
 */
export function pxConvertTodp(px) {
  return px / dpr;
}

/**
 * dp轉換為px
 */
export function dpConvertTopx(dp) {
  return PixelRatio.getPixelSizeForLayoutSize(dp);
}
復制代碼

3.3 WEB端開發

在寫

CSS時，我們用到最多的單位是

px，即

CSS像素，當頁面縮放比例為

100%時，一個

CSS像素等于一個設備獨立像素。

但是

CSS像素是很容易被改變的，當用戶對瀏覽器進行了放大，

CSS像素會被放大，這時一個

CSS像素會跨越更多的物理像素。

頁面的縮放系數 = CSS像素 / 設備獨立像素。

3.4 關于屏幕

這里多說兩句

Retina屏幕，因為我在很多文章中看到對

Retina屏幕的誤解。

Retina屏幕只是蘋果提出的一個營銷術語：

在普通的使用距離下，人的肉眼無法分辨單個的像素點。

為什么強調

普通的使用距離下呢？我們來看一下它的計算公式：

a代表人眼視角，

h代表像素間距，

d代表肉眼與屏幕的距離，符合以上條件的屏幕可以使肉眼看不見單個物理像素點。

它不能單純的表達分辨率和

PPI，只能一種表達視覺效果。

讓多個物理像素渲染一個獨立像素只是

Retina屏幕為了達到效果而使用的一種技術。而不是所有

DPR > 1的屏幕就是

Retina屏幕。

比如：給你一塊超大尺寸的屏幕，即使它的

PPI很高，

DPR也很高，在近距離你也能看清它的像素點，這就不算

Retina屏幕。

?

?

我們經常見到用

K和

P這個單位來形容屏幕：

P代表的就是屏幕縱向的像素個數，

1080P即縱向有

1080個像素，分辨率為

1920X1080的屏幕就屬于

1080P屏幕。

我們平時所說的高清屏其實就是屏幕的物理分辨率達到或超過

1920X1080的屏幕。

K代表屏幕橫向有幾個

1024個像素，一般來講橫向像素超過

2048就屬于

2K屏，橫向像素超過

4096就屬于

4K屏。

四、視口

視口(

viewport)代表當前可見的計算機圖形區域。在

Web瀏覽器術語中，通常與瀏覽器窗口相同，但不包括瀏覽器的

UI， 菜單欄等——即指你正在瀏覽的文檔的那一部分。

一般我們所說的視口共包括三種：布局視口、視覺視口和理想視口，它們在屏幕適配中起著非常重要的作用。

4.1 布局視口

?

?

布局視口(

layout viewport)：當我們以百分比來指定一個元素的大小時，它的計算值是由這個元素的包含塊計算而來的。當這個元素是最頂級的元素時，它就是基于布局視口來計算的。

所以，布局視口是網頁布局的基準窗口，在

PC瀏覽器上，布局視口就等于當前瀏覽器的窗口大小（不包括

borders 、

margins、滾動條）。

在移動端，布局視口被賦予一個默認值，大部分為

980px，這保證

PC的網頁可以在手機瀏覽器上呈現，但是非常小，用戶可以手動對網頁進行放大。

我們可以通過調用

document.documentElement.clientWidth / clientHeight來獲取布局視口大小。

4.2 視覺視口

?

?

視覺視口(

visual viewport)：用戶通過屏幕真實看到的區域。

視覺視口默認等于當前瀏覽器的窗口大小（包括滾動條寬度）。

當用戶對瀏覽器進行縮放時，不會改變布局視口的大小，所以頁面布局是不變的，但是縮放會改變視覺視口的大小。

例如：用戶將瀏覽器窗口放大了

200%，這時瀏覽器窗口中的

CSS像素會隨著視覺視口的放大而放大，這時一個

CSS像素會跨越更多的物理像素。

所以，布局視口會限制你的

CSS布局而視覺視口決定用戶具體能看到什么。

我們可以通過調用

window.innerWidth / innerHeight來獲取視覺視口大小。

4.3 理想視口

?

?

布局視口在移動端展示的效果并不是一個理想的效果，所以理想視口(

ideal viewport)就誕生了：網站頁面在移動端展示的理想大小。

如上圖，我們在描述設備獨立像素時曾使用過這張圖，在瀏覽器調試移動端時頁面上給定的像素大小就是理想視口大小，它的單位正是設備獨立像素。

上面在介紹

CSS像素時曾經提到

頁面的縮放系數 = CSS像素 / 設備獨立像素，實際上說

頁面的縮放系數 = 理想視口寬度 / 視覺視口寬度更為準確。

所以，當頁面縮放比例為

100%時，

CSS像素 = 設備獨立像素，

理想視口 = 視覺視口。

我們可以通過調用

screen.width / height來獲取理想視口大小。

4.4 Meta viewport

元素表示那些不能由其它

HTML元相關元素之一表示的任何元數據信息，它可以告訴瀏覽器如何解析頁面。

我們可以借助

元素的

viewport來幫助我們設置視口、縮放等，從而讓移動端得到更好的展示效果。

復制代碼

上面是

viewport的一個配置，我們來看看它們的具體含義：

Value	可能值	描述
width	正整數或 device-width	以 pixels（像素）為單位， 定義布局視口的寬度。
height	正整數或 device-height	以 pixels（像素）為單位， 定義布局視口的高度。
initial-scale	0.0 - 10.0	定義頁面初始縮放比率。
minimum-scale	0.0 - 10.0	定義縮放的最小值；必須小于或等于 maximum-scale的值。
maximum-scale	0.0 - 10.0	定義縮放的最大值；必須大于或等于 minimum-scale的值。
user-scalable	一個布爾值（ yes或者 no）	如果設置為 no，用戶將不能放大或縮小網頁。默認值為 yes。

4.5 移動端適配

為了在移動端讓頁面獲得更好的顯示效果，我們必須讓布局視口、視覺視口都盡可能等于理想視口。

device-width就等于理想視口的寬度，所以設置

width=device-width就相當于讓布局視口等于理想視口。

由于

initial-scale = 理想視口寬度 / 視覺視口寬度，所以我們設置

initial-scale=1;就相當于讓視覺視口等于理想視口。

這時，1個

CSS像素就等于1個設備獨立像素，而且我們也是基于理想視口來進行布局的，所以呈現出來的頁面布局在各種設備上都能大致相似。

4.6 縮放

上面提到

width可以決定布局視口的寬度，實際上它并不是布局視口的唯一決定性因素，設置

initial-scale也有肯能影響到布局視口，因為布局視口寬度取的是

width和視覺視口寬度的最大值。

例如：若手機的理想視口寬度為

400px，設置

width=device-width，

initial-scale=2，此時

視覺視口寬度 = 理想視口寬度 / initial-scale即

200px，布局視口取兩者最大值即

device-width

400px。

若設置

width=device-width，

initial-scale=0.5，此時

視覺視口寬度 = 理想視口寬度 / initial-scale即

800px，布局視口取兩者最大值即

800px。

4.7 獲取瀏覽器大小

瀏覽器為我們提供的獲取窗口大小的

API有很多，下面我們再來對比一下：

?

window.innerHeight：獲取瀏覽器視覺視口高度（包括垂直滾動條）。

window.outerHeight：獲取瀏覽器窗口外部的高度。表示整個瀏覽器窗口的高度，包括側邊欄、窗口鑲邊和調正窗口大小的邊框。

window.screen.Height：獲取獲屏幕取理想視口高度，這個數值是固定的，

設備的分辨率/設備像素比

window.screen.availHeight：瀏覽器窗口可用的高度。

document.documentElement.clientHeight：獲取瀏覽器布局視口高度，包括內邊距，但不包括垂直滾動條、邊框和外邊距。

document.documentElement.offsetHeight：包括內邊距、滾動條、邊框和外邊距。

document.documentElement.scrollHeight：在不使用滾動條的情況下適合視口中的所有內容所需的最小寬度。測量方式與

clientHeight相同：它包含元素的內邊距，但不包括邊框，外邊距或垂直滾動條。

五、1px問題

為了適配各種屏幕，我們寫代碼時一般使用設備獨立像素來對頁面進行布局。

而在設備像素比大于

1的屏幕上，我們寫的

1px實際上是被多個物理像素渲染，這就會出現

1px在有些屏幕上看起來很粗的現象。

5.1 border-image

基于

media查詢判斷不同的設備像素比給定不同的

border-image：

       .border_1px{
          border-bottom: 1px solid #000;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px{
                border-bottom: none;
                border-width: 0 0 1px 0;
                border-image: url(../img/1pxline.png) 0 0 2 0 stretch;
            }
        }
復制代碼

5.2 background-image

和

border-image類似，準備一張符合條件的邊框背景圖，模擬在背景上。

       .border_1px{
          border-bottom: 1px solid #000;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px{
                background: url(../img/1pxline.png) repeat-x left bottom;
                background-size: 100% 1px;
            }
        }
復制代碼

上面兩種都需要多帶帶準備圖片，而且圓角不是很好處理，但是可以應對大部分場景。

5.3 偽類 + transform

基于

media查詢判斷不同的設備像素比對線條進行縮放：

       .border_1px:before{
          content: "";
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }
復制代碼

這種方式可以滿足各種場景，如果需要滿足圓角，只需要給偽類也加上

border-radius即可。

5.4 svg

上面我們

border-image和

background-image都可以模擬

1px邊框，但是使用的都是位圖，還需要外部引入。

借助

PostCSS的

postcss-write-svg我們能直接使用

border-image和

background-image創建

svg的

1px邊框：

@svg border_1px { 
  height: 2px; 
  @rect { 
    fill: var(--color, black); 
    width: 100%; 
    height: 50%; 
    } 
  } 
.example { border: 1px solid transparent; border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; }
復制代碼

編譯后：

.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="2px"%3E%3Crect fill="%2300b1ff" width="100%25" height="50%25"/%3E%3C/svg%3E") 2 2 stretch; }
復制代碼

上面的方案是大漠在他的文章中推薦使用的，基本可以滿足所有場景，而且不需要外部引入，這是我個人比較喜歡的一種方案。

5.5 設置viewport

通過設置縮放，讓

CSS像素等于真正的物理像素。

例如：當設備像素比為

3時，我們將頁面縮放

1/3倍，這時

1px等于一個真正的屏幕像素。

    const scale = 1 / window.devicePixelRatio;
    const viewport = document.querySelector("meta[name="viewport"]");
    if (!viewport) {
        viewport = document.createElement("meta");
        viewport.setAttribute("name", "viewport");
        window.document.head.appendChild(viewport);
    }
    viewport.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + scale + ",maximum-scale=" + scale + ",minimum-scale=" + scale);
復制代碼

實際上，上面這種方案是早先

flexible采用的方案。

當然，這樣做是要付出代價的，這意味著你頁面上所有的布局都要按照物理像素來寫。這顯然是不現實的，這時，我們可以借助

flexible或

vw、vh來幫助我們進行適配。

六、移動端適配方案

盡管我們可以使用設備獨立像素來保證各個設備在不同手機上顯示的效果類似，但這并不能保證它們顯示完全一致，我們需要一種方案來讓設計稿得到更完美的適配。

6.1 flexible方案

flexible方案是阿里早期開源的一個移動端適配解決方案，引用

flexible后，我們在頁面上統一使用

rem來布局。

它的核心代碼非常簡單：

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + "px"
}
setRemUnit();
復制代碼

rem 是相對于

html節點的

font-size來做計算的。

我們通過設置

document.documentElement.style.fontSize就可以統一整個頁面的布局標準。

上面的代碼中，將

html節點的

font-size設置為頁面

clientWidth(布局視口)的

1/10，即

1rem就等于頁面布局視口的

1/10，這就意味著我們后面使用的

rem都是按照頁面比例來計算的。

這時，我們只需要將

UI出的圖轉換為

rem即可。