Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表
Computer 電腦Front-end 網頁前端Life Tech 生活科技Tech 科技

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

蘋果因為有 Retina 螢幕之後，我們想知道我們最後呈現在 Macbook 或 iPhone 畫面上的樣子都非常的麻煩，因為他有好多種解析度。例如我們在做手機的 UI 設計、網頁前端畫面、顯示在手機上的照片等等，都會需要注意到解析度的問題。

大多數的狀況來說，幾乎目前的 APP 都不支援 Retina 的呈現，也就是說 Retina 高解析度的畫面輸出只支援少部分的軟體，像是系統原生的照片瀏覽 APP 在顯示照片、影片時就是以 Retina 的解析度在顯示的。

而 Safari 或其他瀏覽器則都不支援 Retina，我猜原因應該是因為目前主流網頁的設計還是沒有以蘋果的 Retina 螢幕做設計，並竟還是有大多數非蘋果的用戶。所以在瀏覽器的設計上，蘋果還是維持原本傳統的解析度輸出。

iPhone

iPhone 把畫面顯示到你的螢幕上總共會經過三個 (或四個) 過程，我們可以看到下表有三種解析度，其中最重要的是 Points，我們在做網頁設計或任何不支援 Retina 的 APP 時就會使用到這個解析度。

iPhonePoints
(logical resolution)		Rendered Pixels
(resolution)		Physical Pixels像素密度螢幕尺寸
2G, 3G, 3Gs320 x 480320 x 480—163 ppi3.5″
4, 4s320 x 480640 x 960—326 ppi 3.5″
5, 5s, 5c, SE320 x 568640 x 1136—326 ppi 4″
6, 6s, 7, 8375 x 667750 x 1334—326 ppi 4.7″
6+, 6s+, 7+, 8+414 x 7361242 x 22081080 x 1920401 ppi 5.5″
X, Xs375 x 8121125 x 2436—458 ppi 5.8″
XR414 x 896828 x 1792—326 ppi 6.1″
Xs Max414 x 8961242 x 2688—458 ppi 6.5″

特別的是，在 Plus 系列中因為螢幕尺寸的關係，Retina 解析度會被 Downsampling 將畫面縮小到螢幕的尺寸，最終顯示在螢幕上的解析度是 1080 x 1920 的大小。

關於 iPhone 的螢幕尺寸、解析度，還有 UI 設計上需要的規格這裡有更詳細的說明：
The Ultimate Guide To iPhone Resolutions
The iOS Design Guidelines

iPad

iPad Points
(logical resolution)		Rendered Pixels
(resolution) 		像素密度螢幕尺寸
iPad Pro 12.9″1024 x 13662732 x 2048264 ppi12.9″
iPad Pro 11″834 x 11942388 x 1668264 ppi11″
iPad Pro 10.5″834 x 11121668 x 2224264 ppi10.5″
iPad Air768 x 10241536 x 2048264 ppi9.7″
iPad Mini768 x 10241536 x 2048326 ppi7.9″

Macbook

MacbookPoints
(logical resolution)		Rendered Pixels
(resolution)		像素密度
Macbook Air 11″ (non Retina) 1366 x 788—143 ppi
Macbook 12″ with Retina1152 x 7202304 x 1440226 ppi
Macbook Air 13.3″ (non Retina)1440 x 900—128 ppi
Macbook Pro 13.3″ (non Retina)1280 x 800—113 ppi
Macbook Pro 13.3″ with Retina1280 x 8002560 x 1600168 ppi
Macbook Pro 15.4″ with Retina1440 x 9002880 x 1800221 ppi

Copyright announcement:
the featured image: Photo by Michał Kubalczyk on Unsplash