寫在前面
閱讀目錄：
- 手機适配浏覽
- 理一理相關概念
- 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
- 太多。。。
針對這些問題，我相信你可以回答出來，但背後的原因到底是什麼？這些需要做做功課，這個探究的過程，我覺得還是蠻有意思的。
先看這樣一篇博文：自适應網頁設計（Responsive Web Design）
做手機适配浏覽，本來我想用 JS 擷取并判斷是否手機浏覽，但這樣總感覺很别扭，後來看了這篇博文，原來還有個 CSS media queries 的概念，并且用它可以很友善的做到手機适配浏覽，不用 JS 也感覺不到别扭了，對于上面博文内容，我再大緻總結下：
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
- width 大小使用 %，而不使用 px，能不使用 width，就不使用。
- 字型大小使用 em，而不使用 px。
- 使用 media 屬性進行選擇加載或設定，這個屬性很多大型網站前端都會用到，你如果檢視 CSS 元素的話，就會發現在樣式代碼中，有很多這樣的配置
@media screen and (max-device-width: 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 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
檢測的是邏輯分辨率的寬度值？而對于其他手機而言，檢測的卻是實體分辨率的寬度值？
看完這篇博文，你應該會知道這個答案，你的回答是？？？
- 技術文！iPhone6分辨率與适配
- iPhone 6 Screen Size and Web Design Tips
- iPhone 6 Screens Demystified
- iOS Drawing Concepts
- Web開發者和設計師必須要知道的 iOS 8 十個變化
- Detecting iPhone 6/6+ screen sizes in point values
- iPhone 6 Plus Display is the best there is (well, almost)
- iPhone螢幕知識點解析（必看）
作者：田園裡的蟋蟀
微信公衆号：你好架構
出處：http://www.cnblogs.com/xishuai/
公衆号會不定時的分享有關架構的方方面面，包含并不局限于：Microservices（微服務）、Service Mesh（服務網格）、DDD/TDD、Spring Cloud、Dubbo、Service Fabric、Linkerd、Envoy、Istio、Conduit、Kubernetes、Docker、MacOS/Linux、Java、.NET Core/ASP.NET Core、Redis、RabbitMQ、MongoDB、GitLab、CI/CD（持續內建/持續部署）、DevOps等等。
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。
分享到：
QQ空間
新浪微網誌
騰訊微網誌
微信
更多