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

1.左右滑屏手勢

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

2.橫屏展示效果

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

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

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

4、多個音樂同時播放

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

5、圖片請壓縮

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

6、css Sprites圖像拼合

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

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