移动端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">
</div>
<div class="ground ground-blue">
</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