h5在移动端适配经验总结

最近因为一些需要，做了h5相关的工作。发现在pc端浏览器和移动端浏览器上的效果大大不一样，总结如下适配经验，后面总结的继续在这里累加：

1.点击事件的适配
首先，需要在head中添加

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

其中initial-scale=1不写的状况下，click事件是不响应的。其实这些参数都是屏幕缩放相关的，不知道为啥会影响到点击事件。

其次，适配移动端的点击事件，是需要做很多配置的，简单起见，推荐使用第三方插件，毕竟别人多少年的经验了是不。我用了下老师推荐的百度touch，参考：http://www.tuicool.com/articles/Vb6bEjz。看它jquery的风格，使用的时候记得引入jquery。

touch.on('ul li', 'hold tap doubletap', function(ev){
        index  =  $("ul li").index(this.parentNode);
        console.log("ev:"+ev.type+",index = "+index);
    });

上面这个例子是我使用列表时候用的，发现个不一样的地方。这里的this通过开发者工具看到居然不是

节点，而是li里面的节点，所以this.parentNode才能获取到

节点,这与jquery有一丢丢不一样。更多的使用没试过，大家可以尝试下。

2.界面的适配方案
据我们搞前端的同事介绍，大概有两种方式：一种使用百分比控制，这种大概大家都用过，另一种就是rem，也就是我选择的这种方式，赶脚挺好用的。
关于rem的介绍网上有很多，大家可以去搜一下。原理大概是这样的，获取当前窗口的宽度，然后将它n等分，每一份作为一个单元。将所有以px为单位的尺寸换成xx单元。这样根据公式，1个单元也就是1rem = width/n; n是固定的，当窗口宽度width发生变化时，1rem实际代表的像素也对应发生变化。这样不管你怎么变，它都能很好的适配宽度。所以操作步骤如下：

首先，在head中添加js代码，计算1rem的当前实际像素

<script type="text/javascript">
        var cssEl = document.createElement('style');
                      document.documentElement.firstElementChild.appendChild(cssEl);

        function setPxPerRem(){
            var dpr = 1;
            //把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
            var pxPerRem = document.documentElement.clientWidth * dpr / 10;
            cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
        }
        setPxPerRem();
    script>

这段代码很明显要放在前面执行，后面的rem才会生效。

然后配置各个尺寸。比如该情况下，1rem=1/10屏，你的应该是多少个1/10屏。这样写不免有点蛋疼。还好有大大们的插件，cssrem,安装在sublime中，它的作用是自动把px转换为 rem。
安装参考：http://www.myexception.cn/web/1987949.html
配置一下其参数：

{
 "px_to_rem":36,
 "max_rem_fraction_length":3,
 "available_file_types":[".html",".css",".less",".sass"],
}

px_to_rem 很明显是1rem=36px，具体要多少值自己决定。取决于前面的计算公式，width/n。

此时，还可以稍加控制，不让其无限变大，也不让其无限变小，比如说限制font-size最大为60px

function setPxPerRem(){
            var dpr = 1;
            var max = 60;
            //把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
            var pxPerRem = document.documentElement.clientWidth * dpr / 10;
            //限制上限
            if(pxPerRem>60){
                pxPerRem = 60;
            }
            cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
        }

然后就可以愉快的玩耍啦～～