目錄：

1、手機瀏覽器分辨率

2、移動端和pc端網站需要分開嗎

3、dpr和多倍圖

4、常見移動端適配方式

5、大廠手機瀏覽器適配方式

前端開發人員需不需要學習移動端適配： 在全球范圍內，2020 年所有網站訪問的68.1%來自移動設備，比 2019 年的 63.3% 有所增加。臺式機帶來了 28.9% 的訪問量，而 3.1% 的訪問者來自平板電腦。

2021年全球網站訪問來自移動設備勢必會突破70%，所以網頁的移動端適配知識是現在前端開發人員的必修課。下面我們就移動端適配需要了解哪些知識，一起回顧和討論一下。

1、手機的分辨率和手機瀏覽器的分辨率

首先我們得清楚，手機的分辨率和手機瀏覽器分辨率不是一個東西。

一般來說，我們使用的手機的分辨率遠大于手機瀏覽器的分辨率。因為手機分辨率大會讓手機顯示的內容更細膩，比如消除圖片的顆粒感；而手機瀏覽器分辨率小則是為了讓用戶對某些內容更好辨認，比如更大的文字，同時，這樣的設計也可以讓手機瀏覽器展示一些為pc端設計的網頁而不至于由于文字太小無法辨認，或者排版擠成一團看不清楚。

從下邊幾張圖，可以很清楚的看見手機分辨率和手機瀏覽器分辨率的大小和倍數關系： （手機瀏覽器的大小也叫視口大小-viewport）

可以看到現在的旗艦手機的像素比dpr(device pixel ratio)已經達到了3和4，這對我們前端開發人員選擇圖片的大小提出了新的要求，后邊我們會提到多倍圖。

還有就是視口寬度，我們根據查詢現有的大部分手機型號，看到目前的手機視口寬度最小是320px，最大是428px，所以我們一般在媒體查詢時，把視口寬度小于540的設備歸為手機設備。

這里提到的視口大小viewport是比較重要的知識點，移動端網站的開發中尤為重要。我們在這幾個地方都會用到它。

• mate標簽中

width=device-width這句話的意思是讓當前viewport的寬度等于設備的寬度。如果不這樣設置的話，當前viewport默認是980px，是超出一般手機視口大小的。對這個部分存疑的同學可以看一下ppk的3個viewport的解讀。 initial-scale=1.0這句話是說縮放比等于1，也就是不允許手動縮放。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

• 在CSS3響應式頁面設計中的媒體查詢

根據不同的屏幕viewport尺寸來設置不同的css樣式。

@media srceen and (min-width:960px)  and  (max-width:1199px){	·······}

• viewport的css單位vw和vh

現在主流的手機瀏覽器都支持這個新的單位，使用起來簡直太方便了。1vw就等于視口寬度的1%，1vh就等于視口高度的1%。

.title {
    font-size: 5vw;
}

2、移動端和pc端網站需要分開嗎

如果移動端網站和pc端網站需要的結構基本差不多，頁面邏輯沒有那么復雜，那么移動端和pc端可以用一套網站，使用媒體查詢可以針對手機，平板和pc三種尺寸設置三種版式，根據查詢到的設備屏幕尺寸進行不同的樣式展示，以達到三種設備一套代碼的目的。這種響應式的網站可以參考三星和耐克的官網首頁。

而如果網站的移動端和pc端內容差距較大，頁面邏輯復雜，則 需要單獨給移動端編寫頁面，如果你在手機瀏覽器輸入xxxx.com會看到網址自動跳轉到m.xxxx.com，這個就是單獨針對手機端而做的網站。大型網站都是這種pc和移動分離的形式，比如京東、淘寶等。

3、dpr和多倍圖

前邊我們說過，手機的物理分辨率都比瀏覽器分辨率高，兩者的比值叫做dpr（device pixel ratio），這個比值可以通過window.devicePixelRatio查看，當dpr=2 的時候，就意味了手機花了4個物理像素點來展示1個css像素點，所以看起來會更清晰。

文字和邊框由于是矢量的，所以可以被顯示更清晰，而圖片如果還按照css的像素大小來要求，就會顯得很模糊，于是，我們需要用二倍圖、三杯圖甚至是多倍圖用來在dpr大于2的移動端顯示。

比如我們在css上需要展示一張50×50的圖片，如果手機的dpr是2，那么就需要一張100×100的圖片。這樣才可以充分利用手機的物理像素，消除模糊的感覺。

4、常見的移動端適配方式

• mate標簽：name=”viewport” content=”width=device-width,initial-scale=1.0″
• 寬度百分比：寬度百分比，避免出現寬度溢出出現橫向滾動條
• rem：用rem單位來設置文字和文字周邊距離，使用同一個可修改的單位，實現了只修改一個數值就可以修改多處單位的目的
• vw/vh：1vw等于視口寬度的1%，1vh等于視口高度的1%。viewport單位自然而然的根據視口大小來改變單位的值。
• 媒體查詢：使用@media查詢當前視口大小，進而來區分樣式
• flex布局：使用css3的flex彈性布局
• display-fixed：相對視口固定
• 頁面縮放：設置viewport的width，js動態改變initial-scale使頁面等比縮放。
• flexible：淘寶的移動端方案。

5、大廠的移動適配方案

• 京東：

body設置了最小寬度是320，最大寬度是540，body高度不是固定的；

在布局上寬度多數都是用的百分比；

垂直方向的高度，根據元素內容分別使用了px，rem，vw/vh這幾個單位；

文字大小和周圍距離用的是rem單位；圖片基本是二倍圖；導航是用fixed固定。

• 淘寶：

body設置了固定的100%高度和100%寬度；

在內容的布局上多是使用flex彈性布局來完成的；

圖片接近三倍圖；

基于淘寶的flexible，內容的寬高、文字、間距等，都是使用px為單位，lib-flexible會根據視口大小動態改變mate標簽、data-dpr、font-size等屬性的值，從而控制頁面在不同的移動設備上都有良好的表現；

• b站：

b站的頁面寬度同樣是百分比；

布局上使用了flex彈性布局；圖片接近三倍圖；

比較的不同的是b站的內容、文字、間距等大量使用了vw/vh單位，這也是目前比較提倡的移動端使用的單位。