對的,事隔多月我又發廢文了 (不是
解析度這東西真的很謎,謎到可以引戰
因為有些人看到 1440p 就高潮,看到 828p 就亂罵 (雖然該罵但是有些人就是亂罵),然後就沒有然後了
但解析度這東西是絕對的嗎?未必,因為實際上解析度可以分成三大類:
1. 邏輯解析度
2. 彩現解析度,也叫渲染解析度
3. 物理解析度
看完我的不專業瞎掰你就能大概懂這個概念了 (X
順帶一提,本人會把重點偏向 iOS 裝置,如果不是你的愛你可以左轉了 (X
邏輯解析度 Logic Resolution
要用最最最簡單的說法來講的話,邏輯解析度就是一個裝置可以顯示多少像素的空間
比如一台 1920 x 1080 解析度的 24 吋螢幕,在 1 倍縮放的情況下可以顯示 1920 x 1080 像素的空間
比如一台 750 x 1334 的 iPhone SE 可以顯示出 375 x 667 像素的空間
iOS 上的單位為 point;Android 上的單位為 dp/sp,前端和網頁上的 CSS 像素也是以邏輯像素作為單位
比如 @media (max-width: 375px) 的 CSS,只會應用在 375 pt 或以下的邏輯解析度,376 pt 開始就不會生效
彩現解析度 Rendered Resolution
在我給出的兩個邏輯解析度例子你會發現到:
明明 iPhone SE 有 750p 解析度為什麼只能顯示一半的空間?
這就是我要講的東西——彩現解析度和縮放因子 (Scale factor)
在 iPhone 2G 到 iPhone 3GS 時期由於螢幕解析度只有 320 x 480,因此邏輯解析度也是 320 x 480,自然而然彩現解析度也是 320 x 480,此時它的縮放因子為 @1x,也就是 1 倍
在 iPhone 4 使用 Retina 顯示器後,由於解析度提升至 640 x 960,那麼會出現兩種可能性:
1. 如果把邏輯解析度提升至 640 x 960,縮放因子仍然為 1 倍,iPhone 4 可以顯示兩倍的空間,但精細度不升反降 (3.5 吋下的 640 x 960 邏輯解析度會讓一切變得看比奈米 dior),想一想這根本不合邏輯
2. 把邏輯解析度維持在同樣的 320 x 480,但是縮放因子提升至 2 倍,雖然可顯示的空間與 iPhone 3GS 一樣,但是精細度就大幅提升,這才符合邏輯
所以縮放因子就是需要用多少個像素來彩現一個邏輯像素
比如 @2x 縮放就是使用 4 個 (2x2) 像素來彩現一個邏輯像素;@3x 縮放就是用 9 個像素
由於彩現像素是由 SoC 的 GPU 進行的,因此比例縮放越大就越吃 GPU 效能和記憶體的用量
這也是為什麼 iPhone 6 Plus 被戲稱唯一出廠就卡頓的 iPhone
因為 iPhone 6 Plus 使用 @3x 縮放彩現,相當於一個點 = 9 個像素
恰好 Apple A8 的四核 PowerVR GX6450 不怎麼給力
記憶體甚至只有 1 GB LPDDR3 (12.8 GB/s 記憶體頻寬)
記憶體頻寬和容量都不夠的情況下,你說帶起那麼龐大的彩現解析度是不是一個笑話?
通常彩現解析度 = 邏輯解析度 x 縮放因子
如果你還是看不懂,我再拿另外一個例子好了
想像一下你有一台 3840 x 2160 (也就是 4K) 螢幕
如果你設定的縮放因子是 @1x (Windows 下是 100%),就會出現一下情況
顯示空間比吳某凡的牙籤還大,雖然要忍一下,你甚至可以當作使用 4 台 1080p 螢幕
但是你有發現到一個問題嗎?——東西都很小,小得比吳某凡的牙籤還小
除非你是宇智波一族而且經歷過絕望打擊開啟寫輪眼
否則你會看得很痛苦
但如果我把縮放因子從 100% 調成 150% (Windows 對高解析度螢幕的推薦縮放因子) 甚至 200% 呢?
1x 縮放,邏輯像素 3840 x 2160
1.5x 縮放,邏輯像素 2560 x 1440
2x 縮放,邏輯像素 1920 x 1080
雖然由於邏輯像素的降低導致可顯示空間也降低,但換來的就是更好的精細度和清晰度
特別是看色色的文字時不會覺得文字有夠馬賽克,讓你以為你在看日系色色文字
那麼 Android 和 Apple 裝置的縮放因子為多少呢?
Apple 裝置下任何一台帶 Retina 顯示器 Mac 或 iPad 或 iPod touch 都是使用 @2x 縮放因子
比如 12.9 吋 iPad Pro 就是 1366 x 1024 邏輯 x 2 倍 = 2732 x 2048 彩現解析度
iPhone 就很神奇了:
1. 配備 OLED 螢幕的 iPhone 為 @3x 縮放因子
比如 iPhone 12 Pro Max 和 iPhone 13 Pro Max 就是 428 x 926 邏輯 x 3 倍 = 1284 x 2778 彩現解析度
2. 帶 Plus 後綴的 iPhone 也是 @3x 縮放因子
比如 iPhone 8 Plus 就是 414 x 736 邏輯 x 3 倍 = 1242 x 2208 彩現解析度
3. 其餘非 Plus 後綴且配備 Retina LCD 的 iPhone 為 @2x 縮放因子
4. 非 Retina 的 iPhone 或 iPad 或 iPod touch 為 @1x 縮放因子
Android 則根據 DPI (Density per inches,每英吋下的密度) 不同,使用特定的縮放比例:
1. LDPI (120 dpi) 使用 @0.75x 縮放因子
2. MDPI (160 dpi) 使用 @1x 縮放因子,這是基準線
3. HDPI (240 dpi) 使用 @1.5x 縮放因子
4. XHDPI (320 dpi) 使用 @2x 縮放因子
5. XXHDPI (480 dpi) 使用 @3x 縮放因子
6. XXXHDPI (640 dpi) 使用 @4x 縮放因子
這個時候我就可以考各位一個問題了:
Galaxy S20 - 1440 x 3200 彩現解析度,360 x 800 邏輯解析度
iPhone 11 - 828 x 1792 彩現解析度,414 x 896 邏輯解析度
1. 請問誰顯示的內容更多?
2. 請問誰顯示的內容更精細?
答案:
1. iPhone 11,論橫向空間就比 S20 多 54pt
2. Galaxy S20,因為 S20 使用 4 倍縮放;而 iPhone 11 只有 2 倍縮放
這造成了一個問題:
很多 Android 智慧型手機雖然使用真・FHD 甚至是真・1440p 解析度
但由於邏輯解析度普遍在 360 x XXX (雖然有些是 393 x XXX 甚至 412 x XXX)
就會導致 360 x XXX 精細度完全碾壓 iPhone 但是顯示空間不如 iPhone
要在精細度和空間上超越除了 iPhone Plus 和 iPhone Max 以外的 iPhone 至少要 393 橫向邏輯解析度
物理解析度 (Physical Resolution)
用最最最最最簡單的方法來講就是:你手機螢幕上使用的解析度
比如 Realme 9 Pro 的 LCD 螢幕解析度為 1080 x 2412,就代表其物理解析度為 1080 x 2412,RGB 子像素為 (1080 x 2412) x 3
然後你又會有一個疑問:
iPhone 8 Plus 不是 1080 x 1920 嗎?怎麼是 1242 x 2208?你是不是在亂瞎掰?
這就是我也想要說的:
大部分情況下彩現解析度會與物理解析度一致,但也可以不一致
比如 14 吋 MacBook Pro 的物理解析度為 3024 × 1964
系統預設值也是 3024 × 1964 (@2x 縮放的 1512 × 982)
但你可以選擇「更多空間的」3600 × 2338
或者是「放大文字」的 2048 × 1330
但是遇到這種物理與彩現解析度不一致的問題要怎麼解決呢?
其實用「升採樣 (Upsampling)」和「降採樣 (Downsampling)」就可以了
升採樣就是把彩現解析度放大至物理解析度;降採樣就是把彩現解析度縮小至物理解析度、
從而達到貼合物理解析度的效果,但是你怎麼橫豎看都會發現到精細度都不如物理 = 彩現來得效果好
所以 iPhone 8 Plus 的作法就是:
414 x 736 邏輯 → GPU 以 @3x 縮放因子彩現至 1242 x 2208 → 除以 1.15 進行降採樣至 1080 x 1920 物理解析度
iPhone 12 mini 和 iPhone 13 mini 也是如此:
375 x 812 邏輯 → GPU 以 @3x 縮放因子彩現至 1125 x 2436 → 乘以 0.96 進行降採樣至 1080 x 2340 物理解析度
你可能會想:啊為什麼 iPhone Plus/iPhone mini 不做成 360 x 640 / 360 x 780 邏輯解析度,這樣以來就物理 = 彩現了啊
因為如果這樣做的話顯示空間就不如 4.7 吋的 iPhone 了,畢竟 4.7 吋 iPhone 可是有 375 x 667 的邏輯解析度,不符合「Bigger than Bigger」的風範
iPhone 的「螢幕縮放」是尛?
其實就只是降低邏輯解析度,讓一切變得有點大,但是縮放因子不變
如果要支援螢幕縮放,那麼預設邏輯解析度至少要 375 x XXX
也就是說 iPhone 5S/iPhone SE 注定無緣,因為沒有比 320 x XXX 更低的邏輯解析度了
螢幕縮放下的邏輯解析度只有兩種:320 x XXX 和 375 x XXX
螢幕縮放後邏輯 320 x XXX 為:
iPhone 6/6S/7/8/SE2/SE3/X/XS/11 Pro/12 mini/12/12 Pro/13 mini/13/13 Pro
螢幕縮放後橫向邏輯 375 x XXX 為:
iPhone 6 Plus/6S Plus/7 Plus/8 Plus/XS Max/XR/11/11 Pro Max/12 Pro Max/13 Pro Max
最後附上一個 iOS 裝置的邏輯、彩現與物理解析度
裝置 | 邏輯橫向 | 邏輯直向 | 縮放因子 | 彩現橫向 | 彩現直向 | 物理橫向 | 物理直向 |
iPhone (第一代) iPhone 3G iPhone 3GS iPod touch (第一代) iPod touch (第二代) iPod touch (第三代) |
320pt | 480pt | 1x | 320px | 480px | 320px | 480px |
iPhone 4 iPhone 4S iPod touch (第四代) |
320pt | 480pt | 2x | 640px | 960px | 640px | 960px |
iPhone 5 iPhone 5C iPhone 5S iPhone SE (第一代) iPod touch (第五代) iPod touch (第六代) iPod touch (第七代) |
320pt | 568pt | 2x | 640px | 1136px | 640px | 1136px |
iPhone 6 iPhone 6S iPhone 7 iPhone 8 iPhone SE (第二代) iPhone SE (第三代) |
375pt | 667pt | 2x | 750px | 1334px | 750px | 1334px |
iPhone 12 mini iPhone 13 mini |
375pt | 812pt | 3x | 1125px | 2436px | 1080px | 1920px |
iPhone X iPhone XS iPhone 11 Pro |
375pt | 812pt | 3x | 1125px | 2436px | 1125px | 2436px |
iPhone 12 iPhone 12 Pro iPhone 13 iPhone 13 Pro |
390pt | 844pt | 3x | 1170px | 2532px | 1170px | 2532px |
iPhone 6 Plus iPhone 6S Plus iPhone 7 Plus iPhone 8 Plus |
414pt | 736pt | 3x | 1242px | 2208px | 1080px | 1920px |
iPhone XR iPhone 11 |
414pt | 896pt | 2x | 828px | 1792px | 828px | 1792px |
iPhone XS Max iPhone 11 Pro Max |
414pt | 896pt | 3x | 1242px | 2688px | 1242px | 2688px |
iPhone 12 Pro Max iPhone 13 Pro Max |
428pt | 926pt | 3x | 1284px | 2778px | 1284px | 2778px |
iPad mini (第六代) | 744pt | 1133pt | 2x | 1488px | 2266px | 1488px | 2266px |
iPad (第一代) iPad 2 iPad mini (第一代) |
768pt | 1024pt | 1x | 768px | 1024px | 768px | 1024px |
iPad (第三代) iPad (第四代) iPad (第五代) iPad (第六代) iPad Air (第一代) iPad Air 2 iPad Pro 9.7 吋 iPad mini 2 iPad mini 3 iPad mini 4 iPad mini (第五代) |
768pt | 1024pt | 2x | 1536px | 2048px | 1536px | 2048px |
iPad (第七代) iPad (第八代) iPad (第九代) |
810pt | 1080pt | 2x | 1620px | 2160px | 1620px | 2160px |
iPad Air (第四代) iPad Air (第五代) |
820pt | 1180pt | 2x | 1640px | 2360px | 1640px | 2360px |
iPad Pro 10.5 吋 iPad Air (第三代) |
834pt | 1112pt | 2x | 1668px | 2224px | 1668px | 2224px |
iPad Pro 11 吋 (第一代至第三代) |
834pt | 1194pt | 2x | 1668px | 2388px | 1668px | 2388px |
iPad Pro 12.9 吋 (第一代至第五代) |
1024pt | 1366pt | 2x | 2048px | 2732px | 2048px | 2732px |