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

例如：

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

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

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

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

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

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

處理多樣性

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

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

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

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

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

‘像素問題’

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

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

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

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

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

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

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

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

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

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

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

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