那么多手機(jī)屏幕尺寸，設(shè)計(jì)稿應(yīng)該按照哪一個(gè)尺寸作為標(biāo)準(zhǔn)尺寸。現(xiàn)在已經(jīng)有2K分辨率的手機(jī)屏幕了，設(shè)計(jì)稿是不是也要把寬高跟著最大分辨率來設(shè)計(jì)。顯然不是。

請(qǐng)注意：（以下所有討論內(nèi)容和規(guī)范均將viewport設(shè)定為content=”width=device-width”的情況下） 也就是我們的H5頁面前端代碼里面必須包含

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />

<meta content="telephone=no" name="format-detection" />

根據(jù)目前市場(chǎng)流行的手機(jī)移動(dòng)終端，統(tǒng)計(jì)他們的設(shè)備獨(dú)立像素。

在這里，25學(xué)堂也跟大家分享一個(gè)羅列了當(dāng)前最流行的手機(jī)的所有尺寸大小規(guī)范：http://screensiz.es/phone值得大家好好細(xì)看的智能手機(jī)尺寸圖表。

也只有iPhone6+采用了分辨率降頻處理。

8. 靜態(tài)圖盡量保存成png8、或者進(jìn)行圖片壓縮，在線png圖片壓縮工具很多。

這是一張1M的圖片用PS壓縮成jpg、png8、png24的體積對(duì)比。需要補(bǔ)充的是Png8最多只能展示265種顏色，而png24能有1600萬。

所以色彩單一時(shí)用png8，色彩豐富時(shí)用jpg，需要追求精度時(shí)用png24。

9. 無損壓縮圖片可用網(wǎng)站

大家都知道的TinyPNG 和業(yè)界好口碑的智圖。

手機(jī)APP設(shè)計(jì)必備圖片壓縮神器-TinyPNG

推薦一個(gè)APP切圖文件的PNG壓縮工具-Pnggauntlet

10. 圖片避免大小重設(shè)

根據(jù)需求上傳相應(yīng)尺寸圖片，避免大小重設(shè)，不寬于640像素（基于手機(jī)屏幕一般寬度），避免造成圖片質(zhì)量剩余。

11、善于用H5工具匹配多終端

H5中背景圖片寬度固定為640px，那如何匹配高度呢？

如果你用的是H5制作工具——ih5.cn，就能夠解決。

打開ih5.cn，在舞臺(tái)下添加【移動(dòng)設(shè)備】功能，設(shè)置不同方案的高度，案例就可以根據(jù)終端設(shè)備自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的方案去瀏覽。這種方法需要重復(fù)設(shè)計(jì)多種尺寸的圖，堪稱累倒設(shè)計(jì)師的方法。

偷懶的設(shè)計(jì)師們用的是——將設(shè)計(jì)文檔統(tǒng)一按照最大方案也就是640*1040px來創(chuàng)建，然后添加一個(gè)移動(dòng)設(shè)備，選擇默認(rèn)高度，在設(shè)計(jì)文檔時(shí)記得將主要的信息放在中間，重要的按鈕盡量往中間放。