螢幕尺寸相關觀念整理

最近被太多尺寸單位搞得頭昏眼花,還有相同Resolution 不同Screen Size的呈現方式之類,加上自己目前半路出家要惡補東西太多,看完資料後把一些重點摘錄整理在這邊。

Screen Size (螢幕尺寸)

每個螢幕的物理尺寸有自己的長寬,通常用對角線來定義,也就是所謂的幾吋,也會有不同的比例,比如相同的對角線尺寸,但不同螢幕比例下長寬就會有差異,例如4:3 / 16:9 / 16:10 …

你可以用這個連結來查詢真實的實體尺寸是多少,之前手邊沒有螢幕時會用這個在繪圖軟體畫出cm單位的圖印出來當實體參考。

注意,網頁的pixel 跟 APP的 pixel 意義不完全一樣

Resolution (解析度) & Device Pixel (物理像素)

顯示器Display表面是由無數小光點排列而成,稱為物理像素或像素點,簡稱px (device pixel);螢幕Resolution都是固定的,都是以寬度像素 x 長度像素個數表示,例如1920px x 1080px。

px 是抽象相對的單位,不是絕對長度;舉例來說,24吋16:10的螢幕物理尺寸長寬分別是51.69cm x 32.3cm,最高解析度可能是1920 x 1080px;但13吋 MBP 螢幕物理尺寸比較小,最高解析度卻也是1920 x 1080px。

物理尺寸不同,但Resolution 可能沒差多少,這涉及到眼睛距離與成像品質的取捨

Screen Density (螢幕密度)

螢幕密度的定義是一個單位面積下的物理像素px個數,也就是將螢幕尺寸除以螢幕解析度,又因為螢幕尺寸是以對角線來表示,所以「螢幕密度」就是以「斜邊尺寸」除以「斜邊解析度 (像素數)」,單位是ppi,也就是pixel per inch,而整個公式是:

Screen Density = Resolution of Screen Size / Screen Size
PPI = {[(px of length)^2 + (px of width)^2]^(1/2) }/ (inch)

通常會看到兩個單位 dpi & ppi;dpi大部分用於印刷,d=dot 所謂的300dpi、150dpi、72dpi就是這個,但現在dpi & ppi在輸出上已經混用,尤其在illu。

iOS APP 開發單位:pt

因為螢幕製造技術的提升,Screen Density可以進一步往上提高,也就是每一平方吋裡面塞的px可以變更多的時候,在原本的螢幕尺寸上作圖就會遇到換算不同設備時的困難。

舉例來說,iPhone 3G的 Screen Size是3.5”,Resolution是320 x 480px,但iPhone 4加入了螢幕retina技術後,Resolution 是 960 x 640px,但Screen Size 一樣是3.5”,所以如果介面同樣是做一張320 x 480 px的圖片,放在iPhone,看起來會變成只有iPhone3 螢幕裡的1/2大小。

物理尺寸一樣320 x 480,但ip4的螢幕密度是ip3的兩倍,也就是在同樣的Resolution 物理尺寸下ip4是用了足足4倍的device pixel來表現,相對來說就比較細膩

為了避免這個在不同螢幕上大小不一致的問題,iOS在開發上重新定義了一個新單位:「pt (point)」,一個以螢幕密度為163ppi為基準的絕對物理單位,在iOS上溝通單位就可以用pt來取代px:

1 iOS pt = 1/163 inch

也就是說,當我們在iOS app作圖換算倍率時,其實是以iPhone 3G為基礎來看待其他iOS的螢幕,那pt 與 px之間的關係是什麼?以上圖例子來說:

when it is displayed on iPhone 3G:

Density: [ (480px)^2 + (320px)^2 ]^(1/2) / (3.5inch) = (163 px/inch)
163ppi = 163 (px/inch) , so 1 inch = 163 pt = 163px, 1pt = 1px

when it is displayed on iPhone 4:

Denity: [ (960px)² + (640px)² ]^(1/2) / (3.5inch) = (326 ppi)
326ppi = 326 (px/inch), so 1 inch = 163pt, 1pt = 2px

但這邊要注意的是,iPhone3G時1pt=1px,但在2倍ppi的時候其實長寬都需要兩倍,因此1pt=2px其實指的是單向維度,實際上是原本1個pt需要一個px來填滿,現在1個pt需要4個px填滿,簡單來說:

當163ppi下,1pt = 1px,等於一個 pt裡面可以放下一個pixel (1x1)

當326ppi下,1pt = 4px,等於一個 pt裡面可以放下四個pixel (2x2)

1pt 在不同ppi情況下需要的px數量就會有差異

看到這邊可以發現,device pixel 雖然是一個像素點,但實際上的“物理大小”是可以越縮越小,換句話說也就是面板製造技術越來越好,可以用更多pixel塞在同樣尺寸的螢幕裡面,也就是所謂高解析度。

Android 的APP開發單位:DP

同樣道理,不同的螢幕尺寸跟解析度也發生在Android上,所以一樣有一個替代單位 dp 來取代,不同的是 dp 是以160dpi為基準所換算,在不同dp密度下,一個在顯示結果上一樣“大小”的icon,實際上是由不同px製作而成。

以160dpi為基準是 MDPI,1x,往上類推HDPI / 1.5x、XHDPI / 2x、XXHDPI / 3x、XXXHDPI / 4x

製作上的建議

為了要維持一定比例大小的圖,必須要用不同的px尺寸輸出圖片,最好方式還是以1x的基礎做圖,然後往上輸出成不同倍率的尺寸,讓工程師後續可以抓圖使用。

網頁上的開發單位:CSS pixel

雖然它也叫做pixel,但實際上意義和前面設備上的像素點是截然不同的,而是由W3C所定義出來給瀏覽器Browser 所使用的抽象單位,也就是另外一個以物理世界長度為基準的狀況下,會變動的單位。在低解析度桌上型設備或筆電上,CSS pixel = device pixel,也就是 CSS pixel = px,但如果是在高解析度例如印表機或是行動裝置,就會有變化。

在程式設定下已經規定好,因此在網頁開發上通常不會看Resolution,而是看設備參考的device-width作為斷點的設定依據,例如底下連結,不過還是要問一下專業大大,但簡單說至少要做成三種尺寸給工程師去作。

在高密度的螢幕下,1px(CSS pixel)依舊可能會有多個物理像素 (device pixel),在不同設備上會有不同的呈現差異,比如一張 200x200的bitmap 利用CSS pixel 呈現在1x的螢幕上沒問題,每一個CSS pixel 都能對應在 1x 的 device pixel;但在2x的螢幕上會需要用400x400 個device pixel來顯示,所以一個CSS pixel 會有4個 device pixel來顯示,會取相同色塊填滿,顯示的結果就是高解析螢幕沒有表顯得比低解析度好。

處理方式1,利用高解析圖片做採樣處理

如果使用高解析度圖片在網頁上呈現,經過CSS來處理後,在高解析度上可以呈現出原本該有的細膩細節,但在低解析度上透過CSS處理降低採樣,所以呈現品質相對就比較差(但螢幕本來就差,所以根本沒差),但問題是不管哪一種設備都會下載高解析圖片,變成下載大圖這件事很麻煩。

處理方式2,利用程式處理選擇不同尺寸圖片

利用程式碼處理,不同倍率設備選擇不同倍率的圖片來處理,只是程式上需要多一些設定。

處理方式3,利用向量格式處理

像是SVG檔案,通常用在logo or icon這類相對不複雜的圖形,或是使用icon fonts來處理,這類就沒在這邊了。

總結:開發APP

不管 iOS或是 Android,pixel 都是 device pixel,不同倍率要有不同解析度圖片,配合 iOS pt 或是 Android DP

總結:開發Web

Pixel 是 CSS pixel,尤其是RWD以及不同screen density的時候,要注意圖像優化跟viewport以及 break point,可以參考http://screensiz.es/ 裡面的device-width,而不是 resolution

補充:

前端工程師蔡大大說,目前裝置已經可以處理時使用一致比例,所以在作圖時這部分其實還好,但圖片部分提供素材要比原本尺寸大個1.5倍左右

其他實務上相關的觀念,有任何觀點也麻煩大家不吝賜教

主要參考來源:

https://read01.com/zh-tw/KB223k.html#.WbpICdMjHBL

iPhone尺寸繪製建議

Material Design上的手持裝置基本資料

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.