Site icon Soul & Shell Blog

WebApp 行動應用程式開發前,需要先搞懂的「螢幕解析度」、「圖型解析度」與「轉換率」!

前言

現今行動上網裝置 (MID, Mobile Internet Device) 盛行,幾乎到人手多機的境界,不少程式設計師轉戰投入行動應用開發,App 就如同程式設計師的另一片藍海。同時 App 的數量也在這幾年內極速成長,相對的行動裝置硬體需求也大增。伴隨著行動裝置的普及化,開發者要面對這麼多不同種類的硬體裝置,難免吃盡了不少苦頭。

目前市面上行動裝置所搭載的作業系統種類甚多,其中以 Android 的問題最為嚴重(讀者可以參考「Web App 行動開發 (1) – Web App 開發介紹」這一篇文章中所提到「Android 碎片化」問題)。對於作業系統的差異,或許開發者可以採用跨平台技術或框架來降低傷害,但開發者除了要面對眾多作業系統的差異以外,還有另一向令人詬病的問題,那就是裝置螢幕大小與解析度的差異。

解析度差異有關係嗎?當然有關係,這關係可能重產品開始的設計到最後的品質都有影響!如果不重視這個問題,那麼最後設計出來的 App 在不同設備的解析度上,可能會出現奇特的 Layout 現象,或者出現毛邊與毛茸茸的圖示(這個效果用來顯示喬巴應該很適合!)。然而隨著科技的進步,像是 Retina Display 這樣超高解析度的螢幕更是難應付。

剖析「解析度」

今天要介紹的觀念很其實簡單,那就是「解析度」的運作機制!先來介紹一下以下常出現的名詞:

DPI, Dots Per Inch

最常聽到用來表示解析度的單位名詞,DPI 指的就是實際上每一平方英吋可以顯示的單位點數。DPI 越高表示畫面越細膩,因為可以在一平方英吋內容納了更多的點數,像是 Apple 部分產品具備的 Retina Display (視網膜顯示器) 就擁有 300 DPI 以上的解析能力,理論上已經超過正常人類眼睛可以判斷的範圍,等同於人類無法分辨出硬體螢幕最小單位構成的顯示元素。

Screen Density

稱為「螢幕解析度」,用來表示顯示器硬體規格的最高顯示單位,說明的這個顯示器最高可以顯示幾個「點」,例如:1024 * 768, 320 * 480 等等。由於大部分的顯示器硬體在設計上,這個「點」都是接近正方形,因此大部分的情況下解析度是可以直接表示螢幕的長寬比例,比如:16:9, 4:3 等等。

Resulotion

稱為「圖型解析度」,提供程式在系統顯示圖型的解析度範圍,當系統指定「1 Pixel」進行顯示時,實際上在硬體所使用的顯示像素不一定是一個「點」,而是透過特定的「顯示轉換比率」進行換算,這個比率相當重要。在 WebApp 中這個比率稱為「CSS Pixel Ratio」,可以提供開發者掌握圖型在實際硬體上呈現的行為。轉換公式如下:

Resulotion  x  CSS Pixel Ratio  =  Screen Density

CSS Pixel Ratio

這就是前面所提到的「顯示轉換比率」,用來換算系統圖型像素實際在硬體螢幕顯示的單位數,運作的示意圖如下:

上圖中如果我們在 Web 中顯示一張 2*2 像素的圖片,由於轉換率為 1.5 因此實際硬體會用 3*3 的點來顯示這張圖片,那麼會發生什麼事?沒錯,會補點(如同黃色 Pixel)也就是會出現毛邊。那麼要如何解決呢?如果我們一開始使用 3*3 的圖片顯示在 2*2 的系統解析範圍內,那麼顯示器在處理時就會聰明的展現 3*3 的原圖,這樣一樣畫面就漂亮了。

討論

經過上面的介紹,您是否對行動裝置的顯示原理有更進一步的了解呢?往後在設計 App 時,請記得將這個議題列入考量,採用足夠解析度的圖片來顯示,我想這多少讓你的 App 有些加分效果,至少介面看起來不會霧濛濛與毛茸茸!

參考文件

Exit mobile version