成都(dōu)網站(zhàn)推廣手機(jī)網站(zhàn)頁面設計(jì)尺寸

　不(bù)管是(shì)我們是(shì)在做(zuò)手機(jī)網站(zhàn)、手機(jī)APP頁面，甚至微(wēi)信公衆号運營的(de)時(shí)候，移動端設備的(de∞)字體(tǐ)、圖片顯示是(shì)否清晰、精緻，是(shì)否給手機(jī)端用(yòng)戶帶來(lái)良好(hǎo)體(tǐ)驗，都(dōu)是(shì)我們值€得(de)深思的(de)問(wèn)題。

　而移動端的(de)用(yòng)戶體(tǐ)驗跟移動端設備的(de)屏幕分(fēn)辨率密切不(bù)可(kě)分(fēn)，移動終端設備的(de)屏幕分(fēn)辨率很(hěn)多$(duō)都(dōu)不(bù)一(yī)樣，手機(jī)就(jiù)分(fēn)很(hěn)多(duō)種大(dà)小(xiǎo)的(de)，然®後還(hái)有(yǒu)一(yī)些(xiē)平闆電(diàn)腦(nǎo)等等，大(dà)小(xiǎo)很(hěn)難統一(yī)，浏覽器(qì)也(yě)各式各樣。小(xiǎo)狐狸seo在÷這(zhè)裡(lǐ)總結了(le)一(yī)些(xiē)關于手機(jī)端網頁設計(jì)行(xíng)之有(≠yǒu)效的(de)要(yào)點。

　一(yī)、成都(dōu)網站(zhàn)推廣倍率與邏輯像素

　移動端設備屏幕尺寸非常多(duō)，碎片化(huà)嚴重，尤其是(shì)Android ,你(nǐ)會(huì)聽(tīng)到(dào)很(hěn)多(duō)種分(fēαn)辨率：480x800,480x854,540x960 ,720x1280 , 1080x1920,而且還(hái)有(yǒu)傳說(shuō)中的(de)2 K屏，近(jìn)年(n✔ián)來(lái)iPhone的(de)碎片化(huà)也(yě)加劇(jù)了(le)：640x960,640x113<6 , 750x1334,1242x2208.

　Android把各種設備的(de)像素密度劃成了(le)好(hǎo)幾個(gè)範圍區(qū)問(wèn)，給不(bù)同範圍的(de)設備定義了(↑le)不(bù)同的(de)倍率，來(lái)保證顯示效果相(xiàng)近(jìn)，像素密度概念雖然重₩要(yào)，但(dàn)用(yòng)不(bù)看(kàn)我們自(zì)己算(suàn)，iOS與Android都(dōu)幫我們算(suàn)好(hǎo)了(le)。

　像素密度在120左右的(de)屏蟇歸為(wèi)Idpi, 16左右的(de)歸為(wèi)mdpi,以此類推，這(zhè)樣，所有(yǒu)的(de)Androσid屏幕都(dōu)找到(dào)了(le)自(zì)己的(de)位置，并賦予了(le)相(xiàng)應™的(de)倍率：

　Idpi [0,75倍】

　mdpi [1 倍】

　hdpi [1.5倍】

　xhdpi [2倍】

　xxhdpi [3倍】

　xxxhdpi [4倍】

　各型号iPhone的(de)倍率比較簡單，我們後面會(huì)講到(dào)，那(nà)麽Android手機(jī)那(nà)麽多(duō)，具體(tǐ)怎麽分(fēn)？哪些(xiē​)手機(jī)是(shì)幾倍的(de)倍率呢(ne)？我們先看(kàn)一(yī)張素，這(zhè)是(shì)2014年(nián)10月δ(yuè)到(dào)2015年(nián)03月(yuè)的(de)數(shù)據：

　3倍：lpt=ldp = 3px（xxhdpi、iPhone 6 ）

　4倍：lpt=ldp=4px（xxxhdpi）

　單位決定了(le)我們的(de)思考方式。在設計(jì)和(hé)開(kāi)發過程中，應該盡量使用(yòng)邏δ輯像素尺寸來(lái)思考界面。設計(jì)Android應用(yòng)時(shí)，有(yǒu)的(de)設計(jì)師(shī)喜歡把畫(huà)布設為(wèi)1080x1920,有(yǒ≥u)的(de)喜歡設成720x1280.給出的(de)界面元素尺寸就(jiù)不(bù)統一(yī)了(le)。Android的(≈de)最小(xiǎo)點擊區(qū)域尺寸是(shì)48x48dp,這(zhè)就(jiù)意味著(zhe)在xhdpi的€(de)設備上(shàng)，按鈕尺寸至少(shǎo)是(shì)96x96px.而在xxhdpi設備上(shàng)，則是(shì)144x144✘px.

　二、成都(dōu)網站(zhàn)推廣移動端設備的(de)屏幕尺寸及分(fēn)辨率

　1、Iphone

　尺寸以及分(fēn)辨率

　主流分(fēn)辨率640*1136,750x1334,1242x2208,網頁和(hé)移動的(de)UI用(yòng)72px

　界面基本組成元素

　iPhone的(de)APP界面一(yī)般由狀态欄、導航欄、主菜單欄和(hé)中間(jiān)的(de)內(nèi)容區(qū)域組成。因為(wèi)寬度是(sh↓ì)固定的(de)，所以設計(jì)開(kāi)發起來(lái)很(hěn)方便。下(xià)面我們說φ(shuō)說(shuō)這(zhè)些(xiē)“欄”的(de)尺寸吧(ba)：

　狀态欄：高(gāo)度 40px

　導航欄：高(gāo)度 88px

　主菜單欄：高(gāo)度 98px;

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

　如(rú)果640*1136是(shì)910px

　iPhone5/5s的(de)640*1136的(de)尺寸，其實就(jiù)是(shì)中間(jiān)的(de)內(nèi)容區(qū)域高(gāo)度增加到(dào)910px.

　3.字體(tǐ)

　窗(chuāng)體(tǐ)頂端

　32——36px 32px,注釋等提示文(wén)本28px.

　2、Android

　成都(dōu)網站(zhàn)推廣尺寸以及分(fēn)辨率

　Android界面比較主流的(de)分(fēn)辨率：854*480、720*1280、1080*1920.

　界面基本組成元素

　與ios的(de)一(yī)樣，還(hái)是(shì)有(yǒu)狀态欄、導航欄和(hé)主菜單欄，以720*1280的(de)尺寸，狀态欄的(de)高(gāo)度應為(wèi)50px↓,導航欄的(de)高(gāo)度96px,主菜單欄的(de)高(gāo)度96px.內(nèi)容區(qū)域高(gāo)度為(wèi)：1038px（1280-50-96-96=1038）窗(ch™uāng)體(tǐ)底端

　Android系統采用(yòng)可(kě)自(zì)适應的(de)屏幕支持，由于屏幕尺寸種類繁多(duō)，簡單可(kě)歸為(wèi)ldpi（240✔*320）、mdpi（320*480）、hdpi（480*800）、xhdpi（720*1280）

　字體(tǐ)：android原生(shēng)的(de)字體(tǐ)，與微(wēi)軟雅黑(hēi)很(hěn)像。字體(tǐ)•大(dà)小(xiǎo)範圍為(wèi)16px-32px

　随著(zhe)移動手機(jī)的(de)發展，高(gāo)分(fēn)辨率如(rú)1080x1920手機(jī)逐漸普及，我們在考慮網頁設計(jì)時(shí)候，可(k$ě)以結合目前的(de)主流移動設備的(de)分(fēn)辨率相(xiàng)匹配，這(zhè)樣有(yǒu)利于提高(gāo)大(dà)部分(fēn♥)的(de)移動端用(yòng)戶體(tǐ)驗。同時(shí)，有(yǒu)必要(yào)結合不(bù)同的(de)主流手機(jī)浏覽器ε(qì)如(rú)：百度浏覽器(qì)、QQ浏覽器(qì)等，保證每個(gè)浏覽器(qì)能(néng)夠有 (yǒu)良好(hǎo)的(de)浏覽效果。