一個(gè)優(yōu)秀且具有創(chuàng)意的H5頁面可以讓一個(gè)品牌甚至是產(chǎn)品在朋友圈中迅速的有效的傳播出去，而這股隨著移動(dòng)互聯(lián)網(wǎng)誕生的“H5“，成為了眾多企業(yè)和商家所追逐的對(duì)象。具體怎么樣才能制作出一款優(yōu)秀的H5頁面呢，那么在制作H5頁面時(shí)哪些細(xì)節(jié)容易被忽略呢？藍(lán)橙小編總結(jié)了幾點(diǎn)：

1.左右滑屏手勢(shì)

左右滑屏是H5中很常見的操作形式，在一些營銷H5中會(huì)用到的刮刮卡，亦或是簡(jiǎn)單的切換下一頁的左右滑動(dòng)操作相信大家都見過。向右滑動(dòng)的手勢(shì)很容易觸發(fā)蘋果手機(jī)的跳轉(zhuǎn)上一級(jí)頁面的操作，會(huì)使蘋果手機(jī)用戶直接退出H5頁面，再次進(jìn)入需要從頭開始瀏覽。這樣的手勢(shì)設(shè)置會(huì)大大影響蘋果用的觀看體驗(yàn)。

2.橫屏展示效果

H5制作不建議采取橫屏的構(gòu)圖展示。原因其一，大部分用戶設(shè)備習(xí)慣設(shè)置手機(jī)豎屏鎖定，橫屏展示的H5需要開啟屏幕旋轉(zhuǎn)功能才能正常瀏覽，用戶操作較為繁瑣。其二，現(xiàn)如今手機(jī)屏占比各有千秋，不同的手機(jī)型號(hào)屏幕的長(zhǎng)寬比例不一，無法展示最佳效果。

3.操作按鈕設(shè)置

各種H5的功能按鈕最好不要設(shè)立在頁面底部。許多手機(jī)型號(hào)屏幕底部有隱藏按鍵，把H5功能按鈕設(shè)置在底部容易誤觸手機(jī)系統(tǒng)自身按鍵，或者被系統(tǒng)按鍵遮擋。

4、多個(gè)音樂同時(shí)播放

由于系統(tǒng)的限制，Android在同一時(shí)間，只允許播放一段背景音樂。在IOS下并沒有限制，例如iPhone的機(jī)型在播放背景音樂的同時(shí)可以做到播放各種交互音效。所以一般在Android上H5只播放背景音樂。如有特殊場(chǎng)景的話，可以先暫停背景音樂，再播交互音效，音效播放完畢后再播背景音樂。

5、圖片請(qǐng)壓縮

圖片是網(wǎng)頁的重要資源，除了常見的PS來壓縮圖片外，推薦大家去Tinypng，在這里可以壓縮網(wǎng)頁中常見圖片，如.png和.jpg，而且可以拖拽一組圖，壓縮完后還可以一鍵下載，效果也是杠杠滴~(之前在實(shí)用網(wǎng)站中也有提到過)。

6、css Sprites圖像拼合

瀏覽網(wǎng)頁的時(shí)候，細(xì)心的童鞋可能會(huì)發(fā)現(xiàn)，有些網(wǎng)頁中多張圖片素材按照一定的規(guī)則合成在一張大圖中。為什么這樣處理呢?因?yàn)榘讯鄰垐D片放在一張大圖可以大大減少資源對(duì)服務(wù)器的請(qǐng)次數(shù)，另外合成后的圖片文件大小比多個(gè)單張圖片要小的多。(技術(shù)實(shí)現(xiàn)原理實(shí)際上是用background-position來實(shí)現(xiàn)對(duì)應(yīng)圖片的定位)

綜上所述，以上就是在H5制作時(shí)最容易被忽略的細(xì)節(jié)，如果把以上這些細(xì)節(jié)問題做好了，那么你的H5頁面也是十分的優(yōu)秀的。