衡水網(wǎng)站開發(fā)/網(wǎng)站建設(shè)　　

>隨著時代的發(fā)展，目前市場上的手機(jī)屏幕分辯率越來越高，2K手機(jī)也不在少數(shù)，那么多的手機(jī)屏幕尺寸，我們到底該怎么設(shè)計(jì)寬高呢?那我們的H5頁面是否該跟著最大分辨率來設(shè)計(jì)呢?顯然不是的

　　H5頁面前端代碼里面必須包含移動端H5頁面的設(shè)計(jì)稿尺寸大小規(guī)范內(nèi)容如下：

　　第一：背景圖片必須采用background-size:cover;來實(shí)現(xiàn)。

　　第二：我們在進(jìn)行H5頁面內(nèi)容規(guī)劃布局設(shè)計(jì)的時候，不能把重要內(nèi)容放在太偏下的位置或者偏上，否則前端布局時可能出現(xiàn)內(nèi)容顯示不全的情況。

衡水網(wǎng)站開發(fā)/網(wǎng)站建設(shè)

　　通過對比可得：

　　除去將瀏覽器全屏顯示的情況，幾乎所有情況均會有頂部的狀態(tài)欄和導(dǎo)航欄。

　　iPhone的設(shè)計(jì)標(biāo)準(zhǔn)，狀態(tài)欄和導(dǎo)航欄的獨(dú)立像素高度分別為40px和88px。

　　由于Android系統(tǒng)可以更改狀態(tài)欄和導(dǎo)航欄的高度，這里可以取默認(rèn)值為48px和100px(這些尺寸網(wǎng)上均可查)。

　　那么就會把網(wǎng)頁內(nèi)容往下擠，進(jìn)入盲區(qū)(根據(jù)不同的布局方式可能擠出視口，即可視區(qū)域之下，)。取這兩個系統(tǒng)者的最大值為148(48+100)，設(shè)計(jì)稿要盡量保證單頁下面沒有重要內(nèi)容。

　　那么在所有屏幕大小上把重要內(nèi)容顯示完全，就要注意市面上存在的小尺寸手機(jī)屏幕，現(xiàn)在絕大部分智能手機(jī)分辨率都在640x960px(iPhone4分辨率)之上，所以只要把重要內(nèi)容放在上圖5中的盲區(qū)之上即可。計(jì)算后的最安全高度為812(960-148=812)。

衡水網(wǎng)站開發(fā)/網(wǎng)站建設(shè)

　　在此總結(jié)，一般情況下，以現(xiàn)有市場上流行的移動智能手機(jī)，單頁翻轉(zhuǎn)(非延伸向下的長頁面)設(shè)計(jì)稿尺寸為640×1136，在高度為812處設(shè)置一條安全線(參考線)，將重要的內(nèi)容布局在這條安全線之上。

　　1、像素是沒有寬高的(不要被Photoshop中的像素格欺騙)，它只代表一個采樣的色值。

　　2、任何圖片作為數(shù)據(jù)信息被保存在存儲盤中時，只有寬高像素?cái)?shù)是有意義的，此時的ppi對于圖片來說時沒有任何意義，也并不能描述這個圖片有多少英寸的寬度或者高度，而只有在被打印出來后才有ppi的意義，被打印出來才可以描述這張圖片有多高多寬。

　　3、平時制作H5頁面時設(shè)計(jì)原型時，產(chǎn)品經(jīng)理出的原型稿建議屏寬為320px，用這個尺寸一是為了瀏覽方便(現(xiàn)在很多手機(jī)的屏寬達(dá)到1440px，用這個尺寸去模擬顯然不現(xiàn)實(shí))，

　　二是以iPhone5s為標(biāo)準(zhǔn)的手機(jī)屏寬較小，進(jìn)行內(nèi)容排版布局時屏寬應(yīng)該向下兼容。

　　4、制作設(shè)計(jì)稿時，設(shè)計(jì)師應(yīng)該把原型稿上的所有尺寸進(jìn)行2倍處理。這樣設(shè)計(jì)稿在移動設(shè)備上預(yù)覽便可保證清晰。而前端切片時，按照現(xiàn)在流行的做法，可以直接使用原型稿上的尺寸，也就是設(shè)計(jì)稿上的1/2。

　　5、一般情況下，H5頁面設(shè)計(jì)稿做成640x1136px是最為穩(wěn)妥的尺寸，在812px高度處增加一條安全線，重要內(nèi)容在此線之上(網(wǎng)上有些文章說安全線是960px處，個人認(rèn)為不太準(zhǔn)確)。既保證了在移動設(shè)備上顯示清晰，也保證了素材的最小尺寸。
衡水網(wǎng)站開發(fā)/網(wǎng)站建設(shè)