H5全屏滚动专题页最佳实践

1、slip.js + rem.js

主要插件：

slip.js

github： https://github.com/binnng/slip.js

rem.js

插件为阿里淘宝的 rem 实现的基础实现，源码在下方 dy_h5_template 项目内有单独的文件，在页面开头引入即可，需要配合预处理样式语言如 Less，Scss 使用

2、FullPage + pageResponse

实现方式

全屏滚动插件
背景铺满全屏，内容整体缩放

滑屏 
FullPage
https://github.com/powy1993/fullpage
适配 
pageResponse
http://peunzhang.cnblogs.com/
参考 
H5单页面最佳实践http://winfredwyw.github.io/2016/06/03/H5%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/

---

踩过的坑

1、 fullpage.js

在华为的某款手机上出现过无法正常使用的情况

2、 audio

audio 原生的play和paused属性判断状态可能不准确，可以配合添加class来判断状态（可以解决大部分手机的问题）

音乐播放器在手机黑屏或是进入后台时无法停止播放（如果上一条使用正确，此问题在iphone下有可能会被解决，如果不可以，可以尝试使用第一种方案中王迪提供的watchDog，也只能解决iphone和safari的问题）（此问题需要后期验证完善）

部分手机的静音没办法控制音乐的暂停和播放，暂时无解