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

例如：

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

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

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

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

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

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

處理多樣性

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

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

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

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

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

‘像素問題’

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

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

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

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

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

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

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

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

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

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

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

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