移动端H5填坑指南

移动端H5填坑指南

移动端H5应用，开发过程中主要遇到的问题：

1.适配不同手机

答：手淘方案（rem版本）

2.布局（固定位置、显示隐藏、栅栏）

答：使用position、visibility和display、flex

3.下拉刷新和上滑加载

答：touchstart、touchmove、touchend和scroll实现

4.缓存数据

答：使用localStorage

5.跳转与返回

答：location和history

6.输入与虚拟键盘

下面详细说说：

1.适配不同手机

移动端头疼的一点，就是适配问题，这里关注的是手机分辨率，不同的手机分辨率不一样，苹果手机更是用上了视网膜屏，比如iphone6的DPR是2，6s的DPR是3。具体参考使用Flexible实现手淘H5页面的终端适配，当然，现在已经有更好的方法，那就是使用vw和vh。

手淘方案中用到的是rem这个CSS单位，1 rem等于body.fontSize的大小，默认值是16px，最小值为12px，主要分成两步

1.计算设备实际分辨率，从而得出body.fontSize（rem的基数）并动态写入。首先在网页上写入width=device-width，声明页面宽度为设备宽度，对于Android手机，根据不同设备的分辨率，将宽度除以10就是该设备的rem基数，对于iOS，则还需要计算dpr，所以其实际分辨率为设备宽度*dpr，设备高度*dpr，rem基数设备宽度*dpr/10。

2.元素的大小使用rem为单位。通过上一步，将设备的实际分辨率宽度看作10rem，如果一个元素在一个设备中为1rem，那么在另一个设备中只要也是1rem，就能保证其相对大小是一样的（其实和等比例缩放差不多）。我们只需要计算UI图上元素的rem即可复用，如笔者项目中一级标题字体大小为0.33rem，间距是0.44rem等。

引用的方式如下：

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="../common/framework/js/flexible-0.3.2.debug.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../common/framework/css/flexible-0.3.2.debug.css">

有一点建议，引用该方案后可能需要添加div{font-size:0}，不然Chromium中ipone模拟时div的上内边距会有一定空白（实际设备上没试过，可能不会有影响，但是浏览器上看着不爽就改了）。

2.布局（固定位置、显示隐藏、栅栏）

position、visibility和display、flex都是CSS的属性。

固定区域滑动的实现需要滑动的内容为absolute，父级为fixed，而当父元素为relative而子元素为absolute（absoulte会找最近的父级realative直到为空）时可实现左右滑动。固定区域滑动实现如下

<div class="content">
    <div class="ground-container">
        <div class="ground-panel">
            <div class="ground ground-red">
                &nbsp;
            </div>
            <div class="ground ground-blue">
                &nbsp;
            </div>
        </div>
    </div>
</div>

.ground-container{
    position: fixed;
    top: 10%;
    bottom: 10%;
    left: 0;
    right: 0;
}

.ground-panel{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

.ground