移動端H5設計稿的問題與解決辦法彙總

前沿

就目前來看，移動端的H5是目前的一大趨勢，畢竟就目前來講手機佔據的極大的市場，人們每次都會在空閒時刻拿起本身的手機瀏覽網頁，應用以及各類內容，可是針對於各類不一樣的手機長寬比以及分辨率是不一樣的，如何可以在不一樣的手機上使頁面顯示相對同樣，除了咱們程序員作好相應的兼容以外，那麼設計師在作設計稿的時候應該怎麼辦呢？

頁面設計稿

1. 製做設計稿通常要在原型上進行2倍的處理，防止出來的設計在手機上展現不清晰，在前端進行書寫的時候，直接寫成原型稿的大小，讓圖片壓縮成原來的1/2，這樣顯示是沒有問題的。

2. 通常單頁面的H5設計稿爲640*1136是最爲穩妥的，這樣能夠保證頁面的清晰度，還能保證圖片不至於太大，減小帶寬。
3. 最重要的要在812px高度的地方增長一條安全線，重要的內容要放置在安全線之上。這裏給你們一個測試安全線的地址。

點擊便可預覽

手機掃描二維碼也可預覽

看了這個估計仍是放在960處比較靠譜，否則頁面中東西放不了多少很尷尬。

電腦中顯示外貌

手機中顯示外貌

經過對比能夠發現，這個安全線的位置，能夠設置在960的位置便可，而後你們經過手機再進行測試一下，看看這根線會超出手機屏幕麼？其實這就是爲了不下面的內容會看不見，你們也能看到就是由於頂部狀態欄以及微信的導航欄致使的這部分問題。

前端要作的

頁面代碼中必須包含

<meta content=」initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width」 name=」viewport」 />
<meta content=」telephone=no」 name=」format-detection」 />
複製代碼

1. 背景的圖片咱們必需要使用background-size:cover來實現，有關於img和background的區別請自行搜索。cover主要是用來把背景圖像擴展到足夠大，使其徹底覆蓋背景區域。
2. 進行頁面規劃的時候，不該該把重要內容放在太偏下或者太偏上，不然佈局會紊亂。
3. 通常進行定位在H5頁面中都用top，儘可能不要top以及bottom一塊兒用，目前蘋果X出來了，若是按照屏幕底部佈局以及頂部佈局結合來，會出現你意想不到的效果。
4. 頁面中具體的定位內容就切出元素進行排版定位便可，背景圖就起到一個背景的做用。

最後，估計你們夥都知道的圖片在線壓縮工具給推薦一波，tinypng網址tinypng.com/，沒有之一，至關好用，減小帶寬。

最後，若是文章中有什麼不對的或者須要更正的還望指出，感謝！第一時間更改更新。複製代碼