H5制作中不可忽略的细节

一个优秀且具有创意的H5页面可以让一个品牌甚至是产品在朋友圈中迅速的有效的传播出去，而这股随着移动互联网诞生的“H5“，成为了众多企业和商家所追逐的对象。具体怎么样才能制作出一款优秀的H5页面呢，那么在制作H5页面时哪些细节容易被忽略呢？蓝橙小编总结了几点：

1.左右滑屏手势

左右滑屏是H5中很常见的操作形式，在一些营销H5中会用到的刮刮卡，亦或是简单的切换下一页的左右滑动操作相信大家都见过。向右滑动的手势很容易触发苹果手机的跳转上一级页面的操作，会使苹果手机用户直接退出H5页面，再次进入需要从头开始浏览。这样的手势设置会大大影响苹果用的观看体验。

2.横屏展示效果

H5制作不建议采取横屏的构图展示。原因其一，大部分用户设备习惯设置手机竖屏锁定，横屏展示的H5需要开启屏幕旋转功能才能正常浏览，用户操作较为繁琐。其二，现如今手机屏占比各有千秋，不同的手机型号屏幕的长宽比例不一，无法展示最佳效果。

3.操作按钮设置

各种H5的功能按钮最好不要设立在页面底部。许多手机型号屏幕底部有隐藏按键，把H5功能按钮设置在底部容易误触手机系统自身按键，或者被系统按键遮挡。

4、多个音乐同时播放

由于系统的限制，Android在同一时间，只允许播放一段背景音乐。在IOS下并没有限制，例如iPhone的机型在播放背景音乐的同时可以做到播放各种交互音效。所以一般在Android上H5只播放背景音乐。如有特殊场景的话，可以先暂停背景音乐，再播交互音效，音效播放完毕后再播背景音乐。

5、图片请压缩

图片是网页的重要资源，除了常见的PS来压缩图片外，推荐大家去Tinypng，在这里可以压缩网页中常见图片，如.png和.jpg，而且可以拖拽一组图，压缩完后还可以一键下载，效果也是杠杠滴~(之前在实用网站中也有提到过)。

6、css Sprites图像拼合

浏览网页的时候，细心的童鞋可能会发现，有些网页中多张图片素材按照一定的规则合成在一张大图中。为什么这样处理呢?因为把多张图片放在一张大图可以大大减少资源对服务器的请次数，另外合成后的图片文件大小比多个单张图片要小的多。(技术实现原理实际上是用background-position来实现对应图片的定位)

综上所述，以上就是在H5制作时最容易被忽略的细节，如果把以上这些细节问题做好了，那么你的H5页面也是十分的优秀的。