關於iPhone的屏幕

前言:

隨着 iPhone 5 SE 的即將發佈, iOS 曾經被 Android 羨慕的屏幕適配也漸漸不在那麼方便了.

因此,之前的那種,但願能經過 UI 設計 給出 一套圖,來適應各類尺寸的手機,咱們如今又應該怎麼作呢?

 

 

---

 

結論先放在最前面,防止有些同窗 " 太長不看 ".結論引自威鋒的sdtwd.

 

結論:

從 Scaling factor角度:

 

展現各類設備像素不一樣的渲染，咱們比較有點寬線呈現上.

1.  原始的蘋果由於沒有 Retina 顯示屏, 因此顯示比例係數 爲 1 .
2.  在iPhone 5 上配備了 Retina 顯示屏,因此顯示比例係數 爲 2 .
3.  在iPhone 6 Plus 上配備了 高清Retina 顯示屏。因此顯示比例係數 爲 3，圖像是後來從 2208 × 1242 像素 縮小到 1920 × 1080 像素。

 

1920 / 2208 = 1080 / 1242 = 20 / 23.

這意味着每23個像素從原來的渲染必須映射到20個物理像素。換句話說，圖像被縮小到大約87%的原始大小。

 

 

從 DPI 角度:

 

除了iPhone 6+，其餘全部iPhone的DPI是一致的，都是326，用@2x的素材。

然而6+的實際DPI是401，理論上蘋果應該用401/326 * @2x=@2.46x的素材。

可是這個奇葩的比例對開發者而言很難切圖。

因此蘋果爲方便開發者用的是@3x的素材，而後再縮放到@2.46x上，其實是縮放到2.46/3=83%。

實際上蘋果選取了一個接近比例的87%。

這樣算下來，物理分辨率和虛擬分比率的比例是87%，也就是1920/0.87=2208，1080/0.87=1242.

好處就是開發者更方便，好比準備素材時，字號能夠直接調成3x的。

 

原文:

Line rendering

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on

• Original iPhone - without retina display. Scaling factor is 1.
• iPhone 5 - with Retina display, scaling factor is 2.
• iPhone 6 Plus - with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

 

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.

 

譯文以下:

展現各類設備像素不一樣的渲染，咱們比較有點寬線呈現上.

1.  原始的蘋果由於沒有 Retina 顯示屏, 因此顯示比例係數 爲 1 .
2.  在iPhone 5 上配備了 Retina 顯示屏,因此顯示比例係數 爲 2 .
3.  在iPhone 6 Plus 上配備了 高清Retina 顯示屏。因此顯示比例係數 爲 3，圖像是後來從 2208 × 1242 像素 縮小到 1920 × 1080 像素。

 

1920 / 2208 = 1080 / 1242 = 20 / 23.

這意味着每23個像素從原來的渲染必須映射到20個物理像素。換句話說，圖像被縮小到大約87%的原始大小。