適配的基礎知識

一、理解單位

px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi

如果你是ios開發(fā)，你需要了解的單位：pt，px，ppi；實際開發(fā)中用到的單位：pt。

如果你是android開發(fā)，你需要了解的單位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；實際開發(fā)中用到的單位：dp，sp。

如果你是前端開發(fā)，你需要了解的單位：px，em，rem，dpr；實際開發(fā)中用到的單位：px，em，rem，dpr

1、dpi / ppi

dpi：dot per inch ，每英寸的點數(shù)；打印或印刷領域使用的單位，代表打印機每英寸可以打印出的點數(shù) 。

ppi：pixel per inch ，每英寸的像素數(shù)，像素密度；表示圖像或者顯示器單位面積上像素數(shù)量。

dpi和ppi都是描述分辨率的單位，但是兩者是有區(qū)別的，但是在描述手機分辨率時，可以認為兩者意義相同，以前android設備偏向于使用dpi，ios設備偏向于使用ppi，目前android和ios統(tǒng)一使用ppi描述手機屏幕的像素顯示密度。

2、ldpi、mdpi、hdpi、xhdpi、xxhdpi

android對移動設備不同屏幕分辨率的分類

3、pt，pc，sp

pt：磅（point的音譯），印刷中使用的表示字型的大小單位，1inch = 72pt （印刷中這個關系成立，ios中不成立），ios開發(fā)中使用的邏輯單位，是和設備無關的單位。

pc：印刷中使用的單位，1pc = 12pt，不需要關注。

sp：scale independent pixel ，android設備中用來顯示字體大小的，和設備無關的尺寸，當設置字體大小單位為sp時，android系統(tǒng)字體大小會影響設置的字體渲染時的大小。

4、dip / dp

dp/dip： device independent pixel，表示設備獨立像素，和設備無關的尺寸，相同的dp/dip值，不同設備展示的效果是一樣的。

android使用的單位，之前偏向使用dip，目前建議使用dp。

android設備中，規(guī)定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android設備中dp的計算方法：dp = px * (ppi / 160)，這里的px是指設備的物理像素點。和ios開發(fā)中用的pt單位類似。

5、px

px：像素，有兩種像素概念，一種是網(wǎng)頁設計中使用的css像素，一種是原生移動系統(tǒng)使用的物理像素。

作為css像素時，表示的也是一種設備無關單位，與android中使用的dp類似，默認情況下與系統(tǒng)分辨率下的像素大小相同，標清設備中，一個css像素和一個設備物理像素大小相同；在高清設備中，一個css像素可以大于或者等于多個設備物理像素，具體一個css像素，需要多少個物理像素來展示，瀏覽器會根據(jù)dpr計算。

原生移動系統(tǒng)中使用px單位時，表示的就是屏幕的物理像素點，每種屏幕的物理像素點大小可能不一樣。

6、dpr

dpr：device pixel ratio， 橫向或者縱向設備物理像素數(shù)量與設備獨立像素數(shù)量的比值，瀏覽器中可以通過window.devicePixelRatio獲取(存在兼容性問題)。

對于原生app，ios和android系統(tǒng)會自動根據(jù)dpr計算出渲染時需要的px值，最終不同屏幕上展示出來的大小很接近；而移動端頁面渲染時想要做到這一點，就必須首先得到設備的dpr，然后再根據(jù)dpr計算渲染需要的px值。

ios設備中iphone3的dpr為1；iphone4,5,6,7的dpr為2；iphone6+,7+的dpr為3。iphone6+和iphone7+實際計算出來的dpr應該時2.6左右，但是官方還是建議dpr為3，這是因為ios系統(tǒng)利用了一種“縮減像素采樣”算法，自動縮減到2.6。

android設備中dpr值有多種，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。

二、分辨率

1、手機屏幕分辨率/物理分辨率/原生分辨率

平時說的手機屏幕分辨率，也稱為物理分辨率或者原生分辨率，通常包括縱向分辨率和橫向分辨率，例如iphone6的物理分辨率是1334 x 750，其中縱向分辨率是1334px，橫向分辨率是750px，表示縱向方向可以顯示1334個物理像素點，橫向上可以顯示750個物理像素點，這里描述分辨率使用的px單位，和css中使用的px單位意義不一樣，這里代指物理設備的像素點。

2、系統(tǒng)分辨率

還有一種分辨率叫做系統(tǒng)分辨率，例如iphone6的系統(tǒng)分辨率是667 x 375，其中高度是667pt，寬度是375pt，這里描述分辨率使用了pt單位，是一種設備無關單位。

屏幕尺寸相同的設備，物理分辨率越高，ppi也就越大，絕對單位面積上展示的物理像素數(shù)量越多，展示圖片也就越細膩。

蘋果把ppi > 300的屏幕稱為視網(wǎng)膜屏,Retina屏。

注：ppi是每英寸的像素數(shù)

三、理解viewport

傳統(tǒng)桌面web頁面布局通常是定寬布局，但是定寬布局的方式對移動端卻不適用，原因手機屏幕尺寸大小各異，定寬布局可能在某些手機上出現(xiàn)橫向滾動條，導致閱讀效果比較差。

為了讓手機有更好的網(wǎng)頁瀏覽體驗，蘋果引入了viewport，為頁面提供了一個虛擬的布局窗口，在這個虛擬的布局窗口中渲染頁面，然后系統(tǒng)會把渲染好的頁面自動縮放到手機屏幕大小。

雖然viewport還沒有成為正式的規(guī)范，但是現(xiàn)在絕大部分瀏覽器都支持viewport。

在桌面瀏覽器中，viewport嚴格等于瀏覽器窗口大小，頁面渲染時，頁面寬度不會超過瀏覽器的寬度。

移動端屏幕太窄，為了提供更好的頁面體驗，移動端提供了兩種viewport：可視viewport，布局viewport。

1、可視viewport

可視viewport就是當前屏幕正在展示的區(qū)域，也就是移動設備屏幕的寬度，寬高通過window.innerWidth和window.innerHeight獲取（存在兼容性問題）。

2、布局viewport

布局viewport頁面布局實際用到的viewport，通常比可視viewport要寬，寬高通過document.documentElement.clientWidth和document.documentElement.clientHeight獲取。

3、理想viewport

移動端還有一種viewport概念，可以理解為理想viewport，作用就是在理想viewport下，不同移動設備，展示的字體大小接近，并且不需要用戶縮放就可以展示全部的頁面內(nèi)容。

理想viewport的寬度默認等于可視viewport的寬度，但是對同一臺設備來說，這個理想viewport的寬度是可以改變的，而可視viewport的寬度是不可變的。

如何使用理想viewport來布局頁面呢？只需要設置viewport的width等于device-width。

4、viewport屬性

viewport的屬性，推薦使用以及支持度較廣泛的屬性只有6個：width，height，initial-scale，maximum-scale，minimum-scale，user-scalable。

width：設置viewport布局寬度，內(nèi)核是webkit的瀏覽器默認值是980px，取值范圍在200-10000px，也可以取值為設備寬度device-width（等于橫向設備無關像素數(shù)量）。

height：設置viewport布局高度，默認值依賴設備長寬比以及寬度值，取值范圍在223-10000px，也可以取值為設備高度device-height。

initial-scale：設置初始縮放比例，頁面第一次加載時的縮放比例。默認比例依賴于顯示密度。在密度低于200 dpi的顯示設備上，比例為1.0。在密度介于200及300 dpi之間的顯示設備上，比例為1.5。對于具有300 dpi以上密度的顯示設備，比例為密度/150 dpi向下取整的結果。取值范圍由maximum-scale屬性以及minimum-scale屬性決定。如果設置initial-scale值為1，width默認是device-width，height默認是device-height

initial-scale設置的縮放大小會改變理想viewport的大小，不會改變可視viewport的大小，也不會改變布局viewport的大小，這是某些適配方案依賴的基本原理，也是解決1px問題的關鍵。后面分析適配方案時，動態(tài)viewport適配方案就依賴這個知識點。

maximum-scale：允許用戶縮放到的最大比例，默認值是0.5，范圍從0到10.0。

minimum-scale：允許用戶縮放到的最小比例，默認值是5.0，范圍從0到10.0。

user-scalable：用戶是否可以手動縮放，值可以是：yes/true允許用戶縮放；no/false不允許用戶縮放。

參考

移動端H5頁面適配問題研究（圖片、字體適配講的不錯）

總結

以上是生活随笔為你收集整理的适配方案（四）适配的基础知识之单位、分辨率、viewport的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。