作為移動網站設計者，除非你只是針對特定設備進行設計，否則你應該經常遇到這樣的問題：如何清楚地了解網站運行設備的屏幕尺寸？這個問題長期以來一直困擾著移動設備上的設計師。

例如：

iPhone 的高度為480 像素，寬度為320 像素。

許多諾基亞N 系列設備的寬度為240 像素，高度為320 像素。

許多較新的設備支持寬度和高度倒置的視圖。

較舊（且仍然流行）的諾基亞設備的屏幕尺寸從176208 到352416 不等。

Blackberry 屏幕分辨率也有各種尺寸，從160160 到324352。

本文的目的是解釋如何為各種移動設備和屏幕尺寸正確設計應用程序視圖。首先，提出了小屏幕設計中的兩個關鍵問題：——屏幕和像素尺寸多樣性。

處理多樣性

現在您可能會問自己“我的設計真的需要迎合所有這些不同的屏幕尺寸嗎？”，或者“我應該為每個不同的設備設計一個版本嗎？”這完全取決于您的項目的上下文。根據商業需求，有些設計可能只需要滿足一個屏幕尺寸—— 或者一臺設備就足夠了。但是如果項目要求你的設計必須支持大多數主流設備，那么你必須找到一種有效的方法來處理多種屏幕尺寸。

不要驚慌，它并沒有那么可怕。在為移動網絡設計時，您可以安全地假設頁面是可滾動的—— 就像桌面瀏覽器中的應用程序一樣。這樣就不用考慮屏幕的高度，可以專注于處理設備屏幕的寬度。幸運的是，DeviceAtlas Explorer 已經為現有設備提供了大量的屏幕寬度統計信息。

如圖所示，大部分屏幕寬度主要集中在128、240和176像素這幾類——，其余集中的類型：120、130、160、208和220像素——和取值最多的三類也沒有太大區別。也有少數屏幕尺寸的寬度為96、101、320 或大于320 像素。屏幕寬度在128px 以下的設備占比非常小，共有469 臺設備。

另一點是只有不到5% 的設備寬度大于320 像素。但這個數字未來可能會增加，已經可以看到小屏設備（128、176等）正在逐漸被大屏設備（240+）取代。下圖給出了相關分析。

屏幕的分辨率確實很重要，但是還有一點也必須考慮——屏幕的物理尺寸。

‘像素問題’

多年來，設計師主要為大型桌面設備設計視圖。盡管顯示器的物理尺寸可能不同，但屏幕通常為1024 x 768 像素；常見的像素密度為85 ppi（每英寸像素）。但最近，顯示的視圖開始有點變化：

華碩Eee PC 900上網本分辨率為1024600像素，像素密度約為133ppi。

Apple iPhone 的分辨率為320480 像素，像素密度為160ppi。

諾基亞E60的屏幕分辨率為416352，像素密度為240ppi。

為了支持多種設備，像素密度的差異會帶來新的問題；像素的大小也會影響整個設計的效果。

下圖顯示了100x100 像素的圖像在像素密度為72、144 和240ppi 的設備上的外觀。隨著圖片變小，圖像的形狀和一些細節會失真。

幸運的是，追求更高像素密度的熱潮似乎已經過去，現在超過200 ppi 的設備很少見。這意味著您實際上不需要支持上圖中列出的所有像素密度。但是，在設計時，您需要記住，您不能假設所有設備的像素都相同。需要做以下事情：

確定您需要支持的像素密度范圍。

在真實設備上測試您的設計，以防您忽略某些極端情況。

使用相對單位（例如em 或百分比）設計和定義布局元素。這將為布局元素提供更真實的大小和位置信息。

隨著制造商尋求增加操作系統的靈活性，“像素問題”將受到越來越多的關注。事實上，谷歌的安卓系統已經實現了一個“可能有趣的解決方案”來解決像素問題。 Android 操作系統采用抽象的“dp”（離散像素密度）單位，該單位基于160 ppi 的屏幕尺寸。這允許設計人員使用相對大小來定義字體和其他界面元素，以自動將視圖調整為設備的實際尺寸。

我們專注高端建站，小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！