- 相關標准、文檔、統計數據
- 屏幕的成像原理（物理像素、屏幕尺寸、像素密度、css像素、像素比）
- 移動web的像素
一、相關標准、文檔、統計數據
關於移動設備的數據統計（百度統計）：https://tongji.baidu.com/research/app
關於屏幕設備的PPI、像素、分辨率的統計數據：https://www.sven.de/dpi/
iPhone各版本手機屏幕的CSS像素與物理像素和尺寸數據：https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
二、屏幕的成像原理
2.1光學三原色：RGB即紅色(red)、綠色(green)、藍色(blue)。
2.2空間混色法：利用人眼空間細節分辨力差的特點，將三種基色光在同一平面上的對應位置充分靠近，只要三個基色光點足夠小且充分近，人眼在離開一定距離處，將會感受到是三種基色光混合后所具有的顏色。
2.3像素是指由一個數字序列表示圖像中的一個最小單位。
2.4像點是組成像素的基本單位，一個像素由三個像點組成，這個三個像點分別對應RGB三原色中的一個。
像點在屏幕上的排列方式有兩種，一種是品字形，一種是柵格形：
像素的大小計算方式是兩個像素的同色像點的點距，柵格形的像素的大小計算方式就是兩個相同色塊的距離。
2.5每英寸的點數(DPI：Dot Per Inch)：每英寸長度中的點數，這原本是印刷上的計量單位，指每英寸上能印刷的網點數。由於數字輸入輸出設備的高速發展，將影像的解析度用DPI表示，但由於印刷時計算的網點與顯示的網點並非相同，所以專業的數字影像采用了(PPI：Pixel Per Inch)表示解析度。但是需要注意的是在很多設備參數名稱中可能依然采用的是DPI來描述，在我們普通的描述中他們可以沒有區別，但是如果設計打印像素就需要注意了。
由前面的分析來看PPI越大，屏幕的清晰度越高，一般電腦屏的PPI都在200左右，清晰度更高的可能達到300~400，由此我們可以計算出電腦屏的像個像素的實質大小是：
let inch = 2.54; //cm let pixelSize = 2.54 / 100 ; //0.0254cm ---- 0.0254 * 10 = 0.254 mm //普通液晶屏的以像素實際大小約為 0.254 / 2 ；//0.127mm
（以上的數據是為了演示像素的大小計算，取用大約的數據，與實際的各個產品數據存在差異）
2.6物理像素：屏幕上實際的一個像素點的大小，例如示例中計算出來的0.127mm就是指一個普通的液晶屏的物理像素。
由此，問題就來了！屏幕的尺寸是不變的，現在假設一個元素的大小為100*100px，這時候顯示到了不同像素屏幕上的大小那就會不同，這對於編程來說豈不是噩夢。但現實是我們開發的網頁在不同的屏幕上依然具備相同的大小的特性，這就要歸功於邏輯像素基於參照像素的相互轉換，而px通常就是用來表示邏輯像素的單位。
2.7參照像素：人眼距離屏幕一臂距離的情況下，人眼不能分辨出像素顆粒的解析度（PPI），通常這個值取96。但這個值並不絕對，各個屏幕廠商都是基本靠近這個值。也就是無論屏幕的物理像素是多少，實際畫面的大小保持與96PPI解析度的大小一致。
//為了便於計算，參照像素去一個接近96ppi的為100ppi //假設現在有一個元素大小為100*100px //可以計算得出這個元素在解析度為100ppi的屏幕上的尺寸為 //實際像素大小 let pixelSize = 2.54/100 ; //0.0254cm //100px在解析度上的100ppi的屏幕上的實際大小為 let a = pixelSize * 100；//2.54cm ---- 得出100*100px的元素在100ppi的屏幕上的大小為2.54*2.54cm //那么ppi為200的屏幕我們需要如何處理保證大小一致呢？ let pixeSizeB = 2.54 / 200;//200ppi解析度屏的物理像素0.0127 let physicalPixelB = 2.54/0.0127;//需要物理像素為200
但是我們在編程中設定的是100*100px，又是如何保證這個元素與100ppi的屏幕一致呢？
所以這時候瀏覽器會將100*100px的css像素根據PPI的值轉換成實際的物理像素，示例中瀏覽器要保持100*100px元素大小不變就需要將其轉換成200*200的物理像素大小。
2.8邏輯像素：在PC端可以簡單的理解為CSS像素在PPI為96解析度的屏幕上的實際大小。然后瀏覽器會根據實際設備的PPI轉成對等視覺大小的物理像素。
2.9設備像素比（DPR）：也就是指在同等的屏幕尺寸內物理像素與邏輯像素的比值，實際上也就是設備的PPI與參照像素96的比值。這個參數也就是瀏覽器用來將css邏輯像素轉換成物理像素的參數。
為什么要了解像素呢？對前端開發有什么意義？
假設現在有一個屏幕設備一英寸的屏幕內有四個像素點，然后恰好就有一張兩像素（四像素點）的圖片被這個設備顯示，這時候采用一個一英寸的屏幕內只有一個像素點的設備來顯示這張圖片，就只能顯示這張圖片中的一個像素點。這個描述有點抽線，后面的章節中會有更詳細示例的描述。
三、移動web的像素
在移動web端關於像素問題我們首先也是需要搞清楚幾個概念，手機像素、屏幕尺寸、像素密度、縮放比。其實這三個概念除了縮放比在在前面的像素成像原理中沒有提到以外，前面兩個已經介紹過了，只是名稱的一些差別而已。
1.手機像素：也通常表述為像素分辨率，屏幕的物理像素，例如iPhone6 Plus的像素分辨率是1920*1080，也就是說iPhone6 Plus的縱向物理像素是1920個像素點、橫向物理像素是1080個像素點。
2.屏幕的尺寸：是指屏幕對角線的長度，以英寸為單位。
3.像素密度：屏幕單位尺寸的像素點，也就是在前面像素成像原理中解析的PPI（也可以說是影像解析度DPI），即每英寸的像素點。
根據屏幕的成像原理可以通過手機像素和像素密度（PPI）計算處屏幕的尺寸：
const measure = Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2))/401; console.log(measure); //5.493534089980794 ---- 約等於5.5
解析一下上面的計算（初中幾何題）：
首先已知屏幕尺寸（對角線）每英寸的像素密度是401PPI，那么就只需要已知屏幕對角線的像素點數就可以計算出對角線的長度（小學5年級代數：已知總量和單位量求長度）；
手機對角線的像素點數就等於手機的橫向像素點1080的平方,加上手機的縱向像素點1920的平方的和的平方根。（公式在下面）
同理也可以通過像素點和屏幕尺寸算出PPI：
const ppi = Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2))/5.5; console.log(ppi) //400.52857637859967 ---- 約等於401
在前面的介紹中，大量的出現了PPI這個數據，這個數據到底對於屏幕來說意味者什么呢？在屏幕的成像原理中已經有iPhone3和iPhone的案例介紹了，這里再重復明確的描述一遍。PPI的值越大，表示一英寸的像素點越多，屏幕越清晰。（圖例：1英寸屏幕內1~8ppi的像素點數對比圖）
4.關於PPI可以總結這么幾個規律：
PPI每增加一倍，像素點個數增加四倍；
PPI越大，一像素在屏幕上所占的尺寸越小。
PPI越大屏幕越清晰。
5.從手機屏幕上來了解像素比（DPR）：
5.1獲取BOM上的手機像素比數據：
//獲取手機屏幕像素比 console.log(window.devicePixelRatio);
5.2通過瀏覽器開發者工具查看手機像素比：
這里有一個很重要的參數現在沒辦法在瀏覽器的控制台查看了，手機像素比的參照像素，現在所有手機的參照像素都是iPhone3的手機像素，也就是320*480，也就是在同等屏幕尺寸下，同樣的邏輯像素實際占用屏幕面積與iPhone3的一致，通常這個數據也被稱為邏輯像素。選擇這個數據有幾個因素，第一個因素是這個像素與屏幕占比面積剛剛適合我們平時使用手機看到的圖像大小，其二是因為iPhone3是第一款無實體字母按鈕的觸摸手機，作為一款開創性產品它已經將最適合的視距和像素大小測試出來並取得了非常好的用戶體驗，后來的手機產商也就沒有必要在開發一套標准了。（向喬幫主致敬！）
5.3手機參數像素與PC端的參照像素差別非常大，前面已經介紹了PC端的參照像素為96ppi，手機屏幕的參照像素為320*480px，這里就不換算ppi了，意義不大。
5.4參照像素的邏輯像素與物理像素呈現1：1的關系，所以iPhone4與iPhone3同樣屏幕大小，但iPhone4的物理像素是iPhone3的2倍，也就是說同等邏輯像素的情況下，iPhone4的需要的物理像素是iPhone3的2倍，所以iPhone4的像素比為2。
5.5從iPhone3和iPhone4的屏幕上來看像素比、物理像素、邏輯像素的關系：
假設現在需要在屏幕上顯示一張300*300的邏輯像素的圖片，iPhone3就可以直接給一張300*300的圖片資源就可以了，但是在iPhone4上就需要一張600*600的像素的圖片素材。
同理現在有一張圖片為200*200，要同時保證它顯示在iPhone4和iPhone3上都是清晰的，該如何設定它的邏輯像素。
假設設定為200*200的邏輯像素，它肯定可以清晰的顯示在iPhone3上，但是iPhone4就會是模糊的。這是一因為在iPhone4上200*200的邏輯像素對應的是400*400的物理像素，為了滿足這個物理像素的條件，系統會先將這個200*200的圖片放大到400*400然后填充到這個對應的物理像素內。圖片放大的過程必然會失真，也就是說這時候在iPhone4上同樣屏幕尺寸上顯示的一張失真的圖片。
為了解決這個失真的問題，我們就只能將邏輯像素設定為100*100，這時候iPhone4上剛好就是200*200的物理像素，而iPhone3上使用100*100的物理像素系統就會將圖片縮小成這個對應的像素，因為縮小圖片不會導致圖片失真。
（以下面這個圖片作為參照）
