不管是我們是在做手機(jī)網(wǎng)站、手機(jī)APP頁(yè)面，甚至微信公眾號(hào)運(yùn)營(yíng)的時(shí)候，移動(dòng)端設(shè)備的字體、圖片顯示是否清晰、精致，是否給手機(jī)端用戶帶來良好體驗(yàn)，都是我們值得深思的問題。

而移動(dòng)端的用戶體驗(yàn)跟移動(dòng)端設(shè)備的屏幕分辨率密切不可分，移動(dòng)終端設(shè)備的屏幕分辨率很多都不一樣，手機(jī)就分很多種大小的，然后還有一些平板電腦等等，大小很難統(tǒng)一，瀏覽器也各式各樣。小狐貍seo在這里總結(jié)了一些關(guān)于手機(jī)端網(wǎng)頁(yè)設(shè)計(jì)行之有效的要點(diǎn)。

一、廣州網(wǎng)站推廣倍率與邏輯像素

移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重，尤其是Android ,你會(huì)聽到很多種分辨率：480x800,480x854，540x960 ，720x1280 , 1080x1920，而且還有傳說中的2 K屏，近年來iPhone的碎片化也加劇了：640x960,640x1136 , 750x1334,1242x2208。

Android把各種設(shè)備的像素密度劃成了好幾個(gè)范圍區(qū)問，給不同范圍的設(shè)備定義了不同的倍率,來保證顯示效果相近，像素密度概念雖然重要，但用不看我們自己算，iOS與Android都幫我們算好了。

像素密度在120左右的屏蟇歸為Idpi, 16左右的歸為mdpi,以此類推，這樣，所有的Android屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率：

　　Idpi [0,75倍]

　　mdpi [1 倍]

　　hdpi [1.5倍]

　　xhdpi [2倍]

　　xxhdpi [3倍]

　　xxxhdpi [4倍]

各型號(hào)iPhone的倍率比較簡(jiǎn)單，我們后面會(huì)講到，那么Android手機(jī)那么多，具體怎么分?哪些手機(jī)是幾倍的倍率呢?我們先看一張素，這是2014年10月到2015年03月的數(shù)據(jù)：

　　3倍：lpt=ldp = 3px ( xxhdpi、iPhone 6 )

　　4倍：lpt=ldp=4px ( xxxhdpi)

單位決定了我們的思考方式。在設(shè)計(jì)和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計(jì)Android應(yīng)用時(shí)，有的設(shè)計(jì)師喜歡把畫布設(shè)為1080x1920，有的喜歡設(shè)成720x1280。給出的界面元素尺寸就不統(tǒng)一了。Android的更小點(diǎn)擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。

二、廣州網(wǎng)站推廣移動(dòng)端設(shè)備的屏幕尺寸及分辨率

1、Iphone

尺寸以及分辨率

主流分辨率640*1136，750x1334,1242x2208， 網(wǎng)頁(yè)和移動(dòng)的UI用72px

界面基本組成元素

iPhone的APP界面一般由狀態(tài)欄、導(dǎo)航欄、主菜單欄和中間的內(nèi)容區(qū)域組成。因?yàn)閷挾仁枪潭ǖ?，所以設(shè)計(jì)開發(fā)起來很方便。下面我們說說這些“欄”的尺寸吧：

　　狀態(tài)欄：高度 40px

　　導(dǎo)航欄：高度 88px

　　主菜單欄：高度 98px;

　　內(nèi)容區(qū)域：高度為：734px

　　如果640*1136是910px

　　iPhone5/5s的640*1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910px。

3.字體

窗體頂端

32~36px 32px，注釋等提示文本28px。

2、Android

廣州網(wǎng)站推廣尺寸以及分辨率

Android界面比較主流的分辨率：854*480、720*1280、1080*1920。

界面基本組成元素

與ios的一樣，還是有狀態(tài)欄、導(dǎo)航欄和主菜單欄，以720*1280的尺寸,狀態(tài)欄的高度應(yīng)為50px，導(dǎo)航欄的高度96px，主菜單欄的高度96px。內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038) 窗體底端

Android系統(tǒng)采用可自適應(yīng)的屏幕支持,由于屏幕尺寸種類繁多,簡(jiǎn)單可歸為ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)

字體：android原生的字體，與微軟雅黑很像。字體大小范圍為16px-32px

隨著移動(dòng)手機(jī)的發(fā)展，高分辨率如1080x1920手機(jī)逐漸普及，我們?cè)诳紤]網(wǎng)頁(yè)設(shè)計(jì)時(shí)候，可以結(jié)合目前的主流移動(dòng)設(shè)備的分辨率相匹配，這樣有利于提高大部分的移動(dòng)端用戶體驗(yàn)。同時(shí)，有必要結(jié)合不同的主流手機(jī)瀏覽器如：百度瀏覽器、QQ瀏覽器等，保證每個(gè)瀏覽器能夠有良好的瀏覽效果。