flexible.js 移动端h5响应式适配方案

前两天给公司开发了h5页面，开始考虑适配方案，最后选择了手淘的 flexible.js

第一步：引入flexible.js，<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

第二部：我这里用的是rem进行开发的，那么就是把px转rem了，rem是基于html fontsize改变而改变，而flexible.js也是动态改变html的 fontsize及dpr，设计稿是750的，当然flexible.js不限制尺寸，可以自行调整

第三部：ide的话我用的是webstorm，可以装个px2rem转换插件，方便开发

第四部：不过在pc模拟手机调试的时候发现，发现flexible.js 并不适配ipad，那么这里新建js名字随便起，加上pad适配代码

/(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent) && (head = document.getElementsByTagName('head'), viewport = document.createElement('meta'), viewport.name = 'viewport', viewport.content = 'target-densitydpi=device-dpi, width=480px, user-scalable=no', head.length > 0 && head[head.length - 1].appendChild(viewport));

　　到这里解决了pad适配问题

第五部：上线后发现首次打开页面字体会放大然后正常的问题，解决方法也有很多，这里加个

document.body.style.fontSize = 12 * dpr + 'px';

　　

即可解决，刷新一切正常

最后，h5开发头要加<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />，虽然也有说这段代码可以不加，flexible.js动态适配添加，但是经过测试不加还是有些许问题，还是加上吧

先分享这么多，如果有更好的方法或者建议欢迎留言