NO IMAGE

絕對長度單位

英寸釐米毫米pc
inchcmmmptpica

相對長度單位

是網頁設計中使用最多的長度單位,包括px、em、rem

螢幕尺寸

image

指螢幕的對角線的長度,單位是英寸,1英寸=2.54釐米

iPhone 4/4SiPhone 5/5C/5S/SEiPhone 6/6SiPhone 6S PlusiPhone 7iPhone 7 PlusiPhone 8iPhone 8 PlusiPhone X
3.5英寸4英寸4.7英寸5.5英寸4.7英寸5.5英寸4.7英寸5.5英寸5.8英寸

螢幕解析度

指在橫縱向上的畫素點數,單位是px,1px=1個畫素點。一般以縱向畫素*橫向畫素來表示一個手機的解析度,如1960*1080(這裡的1畫素指的是物理裝置的1個畫素點)

機型解析度機型解析度機型解析度
iPhone 4/4S960*640iPhone 6S Plus1920*1080iPhone 8 Plus1920*1080
iPhone 5/5S1136*640iPhone 71334*750iPhone X2436*1125
iPhone SE1136*640iPhone 7 Plus1920*1080
iPhone 6/6S1334*750iPhone 81334*750

螢幕畫素密度

image

螢幕上每英寸可以顯示的畫素點的數量,單位是ppi,即pixels per inch的縮寫。螢幕畫素密度與螢幕尺寸和螢幕解析度有關,在單一變化條件下,螢幕尺寸越小、解析度越高,畫素密度越大,反之越小

image

  • 螢幕上勾股定理算出對角線的解析度:√(1920² 1080²)≈2203px
  • 對角線解析度除以螢幕尺寸:2203/5≈440dpi
1920^2   1080^2 ≈ 2203^2  //3686400   1166400 = 4852800
2203 / 5 ≈ 440

PPI與DPI

image

PPI(Pixel Per Inch by diagonal):表示沿著對角線,每英寸所擁有的畫素(Pixel)數目
PPI數值越高,代表顯示屏能夠以越高的密度顯示影象,即通常所說的解析度越高、顆粒感越弱

ppi與dpi描述
ppipixels per inch,螢幕上每英寸可以顯示的畫素點的數量,即螢幕畫素密度
dpidots per inch,最初用於衡量列印物上每英寸的點數密度,就是印表機可以在一英寸內打多少個點。當dpi的概念用在計算機螢幕上時,就稱之為ppi。ppi和dpi是同一個概念,Android比較喜歡使用dpi,IOS比較喜歡使用ppi

Viewport

移動端開發中,通常我們都會採用meta標籤設定viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

viewport是什麼?

image

通俗來講,移動端的viewport就是我們所能看到的手機端瀏覽器的可視視窗大小,但viewport又不僅僅侷限於可視視窗的大小,一般情況下,它是比預設視窗大小要大的,這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小,所以為了能在移動端正常顯示為桌面瀏覽器而設計的網頁,移動端的瀏覽器都會預設把自己的預設的viewport設為980px到1024px不等,但其後果就是會出現橫向滾動條,因為移動端瀏覽器可視區域的大小是比預設的viewport寬度要小的

引數描述
width設定layout viewport的寬度,為一個正整數,或字串”device-width”
initial-scale設定頁面的初始縮放值,為一個數字,可以帶小數
minimum-scale允許使用者的最小縮放值,為一個數字,可以帶小數
maximum-scale允許使用者的最大縮放值,為一個數字,可以帶小數
height設定layout viewport 的高度,這個屬性對我們並不重要,很少使用
user-scalable是否允許使用者進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許

不同的裝置對1px有不一樣的定義

在css中我們一般使用px作為單位,在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素,這可能會造成我們的一個錯覺,那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此,css中的畫素只是一個抽象的單位,在不同的裝置或不同的環境中,css中的1px所代表的裝置物理畫素是不同的。在為桌面瀏覽器設計的網頁中,我們無需對這個津津計較,但在移動裝置上,必須弄明白這點。在早先的移動裝置中,螢幕畫素密度都比較低,如iphone3,它的解析度為320×480,在iphone3上,一個css畫素確實是等於一個螢幕物理畫素的。後來隨著技術的發展,移動裝置的螢幕畫素密度越來越高,從iphone4開始,蘋果公司便推出了所謂的Retina屏,解析度提高了一倍,變成640×960,但螢幕尺寸卻沒變化,這就意味著同樣大小的螢幕上,畫素卻多了一倍,這時,一個css畫素是等於兩個物理畫素的。

在移動端瀏覽器中以及某些桌面瀏覽器中,window物件有一個devicePixelRatio屬性,它的官方的定義為:裝置物理畫素和裝置獨立畫素的比例,也就是devicePixelRatio = 物理畫素 / 獨立畫素。css中的px就可以看做是裝置的獨立畫素,所以通過devicePixelRatio,我們可以知道該裝置上一個css畫素代表多少個物理畫素。例如,在Retina屏的iphone上,devicePixelRatio的值為2,也就是說1個css畫素相當於2個物理畫素

其實就是移動端和PC端的px是不同的,移動端的螢幕可視區域(viewport)小但畫素多,所以跟PC相比的每個獨立畫素點的物理畫素是多的,也就是移動端物理畫素更密集,所以更PC的獨立畫素有dp的倍數轉換

在進行具體的分析之前,首先得知道下面這些關鍵性基本概念(術語)。

物理畫素(physical pixel)

一個物理畫素是顯示器(手機螢幕)上最小的物理顯示單元,在作業系統的排程下,每一個裝置畫素都有自己的顏色值和亮度值。

裝置獨立畫素(density-independent pixel)

裝置獨立畫素(也叫密度無關畫素),可以認為是計算機座標系統中得一個點,這個點代表一個可以由程式使用的虛擬畫素(比如: css畫素),然後由相關係統轉換為物理畫素。

所以說,物理畫素和裝置獨立畫素之間存在著一定的對應關係,這就是接下來要說的裝置畫素比。

裝置畫素比(device pixel ratio )

裝置畫素比(簡稱dpr)定義了物理畫素和裝置獨立畫素的對應關係,它的值可以按如下的公式的得到:

裝置畫素比 = 物理畫素 / 裝置獨立畫素 // 在某一方向上,x方向或者y方向

還可以通過window.devicePixelRatio獲取到當前裝置的dpr

window.devicePixelRatio
機型iPhone 3G/3GSiPhone 4/4SiPhone 5/5C/5S/SEiPhone 6/6SiPhone 6S PlusiPhone 7iPhone 7 PlusiPhone 8iPhone 8 PlusiPhone X
螢幕尺寸3.5英寸3.5英寸4英寸4.7英寸5.5英寸4.7英寸5.5英寸4.7英寸5.5英寸5.8英寸
獨立畫素(CSS畫素)480*320480*320568*320667*375736*414667*375736*414667*375736*414812*375
物理畫素(解析度)480*320960*6401136*6401334*7501920*1080(2208×1242)1334*7501920*10801334*7501920*10802436*1125
ppi/dpi(畫素密度)163326326326401326401326401458
dpr(倍圖)12223(2.5)33333(2.9)

如果APP要同時相容iPhone3GS~iPhone6 ,則需要提供icon.png/[email protected]/[email protected]三種解析度的圖片

在Android中,規定以160dpi為基準,1dp=1px。如果密度是320dpi,則1dp=2px,以此類推

2K解析度指的是螢幕解析度達到了一種級別,指螢幕橫向畫素達到2000以上(iPhone X是2K屏)

iPhoneX的適配

background-color

如果網頁設定了一個背景顏色,那麼最簡單解決方案是,在body節點設定background-color,使背景顏色填充整個螢幕,從而解決橫屏顯示左右白邊的問題

viewport-fit

<!--預設值:可視視窗完全包含網頁內容 相當於在安全區域展示-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=auto">
<!--或-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">
<!--網頁內容完全覆蓋可視視窗-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
viewport-fit描述示例示例示例
auto/contain預設值,頁面內容顯示在safe area示例1
cover頁面內容充滿螢幕示例1示例2示例3
橫屏列表側劉海橫屏下列表環繞劉海示例1

設定auto前
image
設定cover後
image

safe-area-inset-*

在設定viewport-fit=cover之後,Web中會新增四個常量

safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom

分別表示safe area和可視視窗viewport頂部,右邊,左邊,底部的間距,可以用於設定margin和padding或者絕對定位時left和top

注意:在橫屏和豎屏狀態下,safe-area-inset-*的值不同

image

為了解決應用viewport-fit=cover之後,有些顯示內容被裁剪的問題,我們可以通過新增邊距使得網頁主要內容處於safe area中不被裁剪,解決方式如下

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

image

示例,比如下面是頂部導航條的適配,能讓左上右都能出現padding來讓元素保留在安全區域以內

總結為,我們可以利用safe-area-inset-*做以下適配,詳細請看DEMO

  • 豎屏下,對底部做padding-bottom: constant(safe-area-inset-bottom);,其他設定是無意義的
  • 橫屏下,對底部設定左,下,右的safe-area-inset-*,對頭部設定左和右的safe-area-inset-*,其他設定也是無意義的
<header><button>返回</button> 頭部</header>
<style>
* {margin: 0;padding: 0;}
body {
width: 100%;height: 100%;
//設定背景顏色,也是一種適配方案
background-color: #A4F4B0;
}
header {
background-color: red;height: 50px;line-height: 50px;width: 100%;color: white;position: fixed;left: 0;right: 0;top: 0;bottom: 0px;
//cover下元素出現對應的padding來適配
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
//padding-bottom: constant(safe-area-inset-bottom);
padding-top: constant(safe-area-inset-top);
}
button {
display: inline-block;background-color: blue;color: white;border: none;height: 50px;width: 80px;
//字型記得必須設定,不然按鈕會有畫素的誤差
font-size: 18px;
}
</style>

媒體查詢

device-width
device-height
-webkit-device-pixel-ratio

注意-webkit-device-pixel-ratio必須加字首,否則無效

/*iPhoneX的適配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
header {
background-color: black;
}
}
/*iPhone8P的適配*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
header {
background-color: deepskyblue;
}
}

參考文件

iPhone X適配參考文件