前言
現今行動上網裝置 (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 有些加分效果，至少介面看起來不會霧濛濛與毛茸茸！