寫在前面
閱讀目錄：
- 寫在前面
- 手機適配瀏覽
- 理一理相關概念
- pt、px
- ppi、dpi
- 屏幕尺寸、屏幕分辨率
- Retina Display
- Points
- Device Pixel Ratio
- ppi VS dpi
- iPhone 屏幕解惑
最近在做新聞頻道手機適配瀏覽的時候，遇到這樣一個問題，針對不同手機的分辨率，需要設置一個統一的 max-device-width 值，先來看這段代碼：
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="/content/smallScreen.css">
這段代碼什么意思呢？表示如果屏幕的分辨率寬度值小於或等於 800px，那么就加載 smallScreen.css 樣式文件（里面針對手機瀏覽進行了樣式設定），我一開始設置的是 500px，用 Chrome 瀏覽器的手機模式測試，大多數小屏幕的手機瀏覽沒什么問題，但是之后有園友反饋說，小米 2S 瀏覽無效果，后來查找小米 2S 相關參數，屏幕分辨率為 1280x720 像素，看到 720px，然后我就把 max-device-width 的值設置為了 800px（現在的值），小米 2S 瀏覽沒問題了，但之后又有園友反饋說 Meizu MX4 瀏覽無效果，然后查找其屏幕分辨率為 1920x1152 像素，我的天哪？怎么這么高？一般 PC 的分辨率才 1024x768 像素，如果我把 max-device-width 設置成大於 1152 px，那么大多數 PC 瀏覽就成了手機瀏覽模式，這肯定不行。
其實，在上面解決問題的過程中，我有很多的問題，我大致列幾個：
- 屏幕分辨率到底是什么？它和什么有關？
- 為什么 iPhone 6 的分辨率為 375x667 像素？顯示效果卻比一般手機的要好？
- iPhone 6 還有一個分辨率為 750x1334 像素，它又是什么？為什么
max-device-width判斷的是 375px，而不是 750px？ - 太多。。。
針對這些問題，我相信你可以回答出來，但背后的原因到底是什么？這些需要做做功課，這個探究的過程，我覺得還是蠻有意思的。
手機適配瀏覽
先看這樣一篇博文：自適應網頁設計（Responsive Web Design）
做手機適配瀏覽，本來我想用 JS 獲取並判斷是否手機瀏覽，但這樣總感覺很別扭，后來看了這篇博文，原來還有個 CSS media queries 的概念，並且用它可以很方便的做到手機適配瀏覽，不用 JS 也感覺不到別扭了，對於上面博文內容，我再大致總結下：
<meta name="viewport" content="width=device-width, initial-scale=1" />這段代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為 1.0，即網頁初始大小占屏幕面積的 100%，總的來說，就是讓網頁做到 100% 自適應設備的寬高度。- width 大小使用 %，而不使用 px，能不使用 width，就不使用。
- 字體大小使用 em，而不使用 px。
- 使用 media 屬性進行選擇加載或設置，這個屬性很多大型網站前端都會用到，你如果查看 CSS 元素的話，就會發現在樣式代碼中，有很多這樣的配置
@media screen and (max-device-width: 400px)，意思就是如果寬度小於 400px，則進行下面的設置。 - 上面說的是在 CSS 樣式表中使用 media，還有一個就是在 Html head 中，也就是博文一開始的那段代碼，表示選擇性加載 CSS 樣式表。
上面是從一個大局方向考慮自適應網頁設計，我們再來了解下 Media Queries 的一些東西，我大致列出一些重要或者常用的屬性：
- 設備類型：
- all－所有設備（默認）
- screen－電腦顯示器（最常用）
- handheld－便攜設備（設置無效，一般手機不認為自己是 handheld）
- print－打印用紙或者打印預覽圖
- projection－各種攝影設備
- tv－電視類型的設備
- width/height：
- width/height－瀏覽器窗口的寬度值/高度值
- min-width/min-height－大於或等於瀏覽器窗口的寬度值/高度值（判斷使用）
- max-width/max-height－小於或等於瀏覽器窗口的寬度值/高度值（判斷使用）
- device-width/device-height：
- device-width/device-height－設備屏幕分辨率的寬度值/高度值
- min-device-width/min-device-height－大於或等於屏幕分辨率的寬度值/高度值（判斷使用）
- max-device-width/max-device-height－小於或等於屏幕分辨率的寬度值/高度值（判斷使用）
- device-aspect-ratio：
- device-aspect-ratio－設備屏幕寬高比
- min-device-aspect-ratio－大於或等於設備屏幕寬高比（判斷使用）
- max-device-aspect-ratio－小於或等於設備屏幕寬高比（判斷使用）
- orientation（屏幕豎橫）：
- portrait－豎屏
- landscape－橫屏
- -webkit-min-device-pixel-ratio（渲染比例，一般用在 iPhone 手機）
- 1－iPhone 3GS
- 2－iPhone 4/4s/5/5s/5c/6
- 3－iPhone 6 Plus
相關參考資料：
- CSS媒體查詢
- CSS3 之媒體查詢Media Query
- CSS3 @media Rule
- CSS3 Media Queries
- Media Queries for Standard Devices
- handheld css does not work properly
- max-device-width vs max-width? Which one should I use?
pt、px、ppi、dpi、屏幕尺寸、屏幕分辨率、Retina Display、Points、Device Pixel Ratio
我們一個一個來理清這些概念。
1. pt
pt 全稱 point，意為點，是以前印刷行業的概念，它是標准的長度單位，1pt＝1/72 inch。
2. px
px 全稱 pixel，意為像素，它不是標准的長度單位，一般表示個數，比如 10px，代表的是 10 個像素點，對於不同分辨率的屏幕，像素點的實際大小也會不同，所以，10 px 長度的圖片，在不同分辨率的屏幕下，顯示的長度也會不同。
3. ppi
ppi 全稱 pixels per inch，意為每英寸的像素數，一般可以理解為像素密度，我們經常說一個手機屏幕顯示比較細膩，換句話說就是 ppi 的數值比較高，這個是判斷手機屏幕質量的一個重要指標。
ppi 計算公式：ppi＝（橫向像素數的平方＋縱向像素數的平方）開方/屏幕尺寸。
4. dpi
dpi 全稱 dots per inch，意為每英寸的點數，在打印行業，一般指的是每英寸墨滴的數量，dpi 的數值越小，打印出來的質量越差，在 iPhone 屏幕設計中，和 Points 數值有關。
5. 屏幕尺寸
屏幕尺寸指的是屏幕對角線的長度，比如 iPhone 6 的屏幕尺寸為 3.7 英寸，指的是屏幕對角線的長度為 3.7 英寸，我們也可以通過勾股定理得出（寬約 2.3 英寸、高約 4.1 英寸）。
6. 屏幕分辨率
分辨率是我們常說的一個屏幕參數，也是我們判斷屏幕“好壞”的一個指標，但事實真是這樣嗎？分辨率越高，屏幕越好嗎？首先，分辨率是什么？比如 iPhone 6 的分辨率為 750x1334 像素，指的是在橫向有 750 個像素，縱向有 1334 個像素，那這個數值和什么有關呢？根據上面的 ppi 計算公式，我們可以知道，分辨率和屏幕尺寸和 ppi 有關。
一個分辨率為 750x1334 的屏幕，可以是一個手機的大小，也可以是一面牆的大小，尺寸越大，ppi 的值越小，顯示就越粗糙，尺寸越小，ppi 的值越大，顯示就越細膩，當然，前提條件是分辨率不變的情況下。
7. Retina Display
Retina Display 意為視網膜顯示屏，名稱為蘋果獨享（已注冊商標），其他公司不能使用此名稱，根據科學研究發現，人眼每英寸最對可以看到大約 300 個像素，多了就分辨不出來了，也就是 ppi 的值為 300，Retina Display 所表示的就是，ppi 大於 300 的顯示屏。
iPhone 3GS 為非 Retina Display，ppi 值為 163，iPhone 4/4s/5/5s/5c/6 為 Retina Display，值為 326，而 iPhone 6 Plus 值為 401。
8. Points
Points 意為坐標系統，是 iPhone 4 推出后出現的概念，比如 iPhone 6 的 Points 為 375x667，這個數值代表什么意思呢？左上角為坐標原點，橫向為 375 個 point，縱向有 667 個 point，那這個和分辨率有什么關系呢？我們知道，分辨率表示的是橫縱向的像素個數，而這個是點數，他們分辨對應的是 ppi 和 dpi，咋一看好想沒有什么關系，分辨率和尺寸、ppi 有關，Points 和尺寸、dpi 有關，他們唯一相關的也就是屏幕尺寸了，但一般手機屏幕尺寸在設計的時候，會首先確定好，那它們關系是什么呢？其實是渲染比例（Scale），這個我們后面再說。
蘋果為什么要搞 Points 這個東西？我們知道在手機上設置區域位置的時候，一般會設置寬度和高度，單位為 px（像素），如果手機屏幕尺寸相同，但因為手機屏幕的分辨率不同，最后定位的區域位置就會發生變化，我舉一個例子，比如我們要畫一英寸長度的線，根據 iPhone 3GS 的 ppi 值（163），我們知道需要 163 個像素，也就是 163 px，但如果畫在 iPhone 4 上面呢？iPhone 4 的 ppi 為 326，是 iPhone 3GS 的兩倍，所以，一英寸長度的線會對應 326px，換句話說，iPhone 4 上的像素長度是 iPhone 3GS 的一半，如果你不理解這個，可以想想上面第六點的內容。
根據上面所描述的情況，我們可以得出這樣一個結論，因為手機的屏幕分辨率不同，所以我們在設計頁面布局的時候，需要針對每一款手機進行設計，這是不是要死人？對於開發者來說，答案是肯定的，所以，蘋果想了一個辦法，就是 Points－坐標系統，iPhone 3GS 和 iPhone 4 的 Points 都為 320x480，我們在設計頁面布局的時候，不需要設置 px，只需要設置 Points 的坐標，剩下的工作 iPhone 會自己幫你計算，比如畫一個線條，長度為 1pt，在 iPhone 3GS 中，因為渲染比例為 1:1，所以最后的長度為 1px，而在 iPhone 4 中，渲染比例為 2:1，所以最后的長度為 2px，但如果你用尺子去量的話，它們的實際長度都是一樣的，那為什么 px 的數值不同呢？很簡單，因為屏幕分辨率不同。
9. Device Pixel Ratio
Device Pixel Ratio 又稱為 Scale，意為渲染比例，什么意思呢？就是物理像素個數和邏輯坐標點數的比例，常見數值為 1、2、3，我們知道 iPhone 3GS 的物理分辨率為 320x480，邏輯分辨率也為 320x480，也就是 1:1，對應 ppi 和 dpi 數值都為 163，比例也為 1:1，而 iPhone 4 的物理分辨率為 640x960，邏輯分辨率為 320x480，也就是 2:1，對應 ppi 數值為 326，dpi 數值為 163，比例也為 2:1，之后一直到 iPhone 6，Scale 的值都為 2，而 iPhone 6 Plus 的 Scale 值為 3。
其實，最簡單直白的解釋是，如果 Scale 數值為 1，那么一個邏輯坐標點需要一個像素點進行渲染，如果數值為 2，那么一個邏輯坐標點則需要兩個像素點進行渲染，以此類推。
那么 Scale 數值變化，對我們會造成什么影響呢？我們先分析一下，我們設計一個寬高為 30 px 的圖片，放在 iPhone 3GS 上面的大小就是 30 px，因為 Scale 的值就為 1，而放在 iPhone 4 上面，因為 Scale 數值為 2，一個坐標點需要兩個像素點來渲染，最后圖片就會變小，可以理解為相當於，在 iPhone 3GS 上 15px 大小的圖片，這不是我們想要的，那么我們需要重新設計一張 60px 的圖片，這樣在 iPhone 4 和 iPhone 3GS 上顯示才能一樣，如果 Scale 數值為 3，你可能知道答案了，沒錯，就是要重新設計一張 90px 的圖片。
下面這張圖很直觀的展示了，就不再描述了。
10. ppi vs dpi
如果你可以看懂上面的幾個概念，那么 ppi 和 dpi 的區別，差不多你也懂了，像素是正方形的，而點是不規則的（可以看作圓形），其實，ppi 和 dpi 並沒有直接的聯系，分辨率分為邏輯分辨率（Rendered Pixels）和物理分辨率（Physical Pixels），對於 iPhone 屏幕來說，dpi 和 ppi 也是邏輯和物理的關系，它們之間唯一的“橋梁”是 Scale，記住這一點就行了。
相關參考資料：
- dpi 、 dip 、分辨率、屏幕尺寸、px、density 關系以及換算
- 關於pt與px
- PPI vs. DPI: 有什么區別？（必看）
- 1 pt 的圖形大小與其在屏幕上顯示出來的大小之間有什么關系？
- DPI和PPI
- 設計師DPI指南(翻譯)（必看）
- 分辨率與DPI組合
- Sizes of iPhone UI Elements
iPhone 屏幕解惑
一個知乎上的提問（非常有意思）：iPhone 6 Plus 的邏輯分辨率為什么是 414x736？
我先把回答者 godlaugh 的一張圖貼出來（因為非常重要）：
首先，如果你能看懂這些參數，那么有關 iPhone 屏幕相關的東西，你肯定也懂了，甚至你可以預測下一代 iPhone 屏幕的具體參數。
這張圖我看了好長時間，然后根據圖中查找一些相應概念進行理解，最后也是雲里霧里的，我自己再進行敘述一遍，以便加深自己的理解。
首先，iPhone 3GS 因為沒有采用 Retina 屏幕，Scale 的比例為 1，也就是一個邏輯坐標點對應一個物理像素點，從 dpi 和 ppi 的數值上就可以看出（同為 163），從 iPhone 4 開始，屏幕采用 Retina，Scale 的比例變為了 2，因為 iPhone 3GS 和 iPhone 4 的屏幕尺寸相同，Points 的數值也沒有發生變化，dpi 不變，那么 ppi 就會變成了原來的兩倍，直白的說，就是 iPhone 4 比 iPhone 3GS 顯示的更加細膩了，從 iPhone 4 到 iPhone 6，Scale 的數值一直為 2，dpi 和 ppi 的值也沒有發生變化，只是 Points 的值逐漸變大了，那有人會問，為什么會變大啊？很簡單，因為屏幕的尺寸變大了，因為 dpi 和 ppi 不變，Points 就會隨着屏幕尺寸變大而變大，這是一個正常的狀態，因為 Scale 的值一直為 2，所以我們根本不需要做圖片的適配。
但到了 iPhone 6 Plus，卻“風雲突變了”，因為 Scale 變成 3 了，godlaugh 的三個方案非常棒，但我有很多不懂的地方，最直白的就是，這些數值到底是如何進行計算的？比如 Points、dpi、ppi、分辨率的值，這里我說一下自己的理解，首先，屏幕在設計的時候，一般尺寸是固定的，這是很重要的前提條件，如果 Scale 的數值不變，我們可以根據尺寸的變化比例和原來 Points 的數值，計算出新的 Points 的數值，比如 iPhone 5s 到 iPhone 6，375=(4.7/4)*320，甚至你不需要計算，因為 ppi 和 dpi 的值不變，如果可以數坐標點的話，你就可以直接數出來，但如果 Scale 的值變了，那對應的值該怎么計算的？首先計算的是 Points，這個我不會計算（需要找一些規律，試過幾次，算的都錯了），iPhone 6 Plus Points 正確的值應該是 414x736，Points 的值算出來后，我們可以根據屏幕尺寸算出來 dpi，因為 Scale 的值為 3，我們可以根據 Points 的值，算出來分辨率為 1242x2208（3 倍關系），分辨率出來了，那么 ppi 也就出來了，算出來為 461。
1242x2208 為 iPhone 6 Plus 的理想分辨率，但為什么讓蘋果搞成了 1080x1920？至於原因，godlaugh 分析的很透徹了，最終的這個分辨率產生的原因是，蘋果“強制”修改了 ppi 的值，downsampling 的過程是，首先由 iPhone 6 Plus 根據 Points 和 Scale，渲染成 1242x2208 的分辨率，但是因為 ppi 實際上數值減少了，所以最終強制進行縮放處理，變成了 1080x1920。為什么要這么做？原因有很多，我們不得而知，但可以肯定的是，iPhone 6 Plus 是一個“過渡產品”，iPhone 7 應該會完美的解決這個問題。
這個分析就到這，還有一個問題（開始的時候就提出）：對於 iPhone 屏幕來說，為什么 max-device-width 檢測的是邏輯分辨率的寬度值？而對於其他手機而言，檢測的卻是物理分辨率的寬度值？
看完這篇博文，你應該會知道這個答案，你的回答是？？？
相關參考資料：