简介

  • 移动端的布局适配方案的采用
    • rem布局（为了避免人工计算px转为rem）
    • vh vw的布局
  • 移动端H5网页开发需要注意的常见问题
    • 点击延时的解决方案（fastClick）
    • 设计师的设计图基本大小，目前主流的是以iPhone6的750宽进行设计（dpr为2）
    • 切图以2倍图进行切割，以免造成图片失真（可采用字体图标、svg）
    • 实现位移动画效果，最好使用transform 而不是position absolute 的top、left等，可以解决移动的卡顿

优化渲染translate3d，开启GPU硬件加速模式

  • 调试可以直接在手机端进行调试，只需手机与电脑在同一局域网内，可直接用手机访问当前H5项目启动

后的IP地址即可比如项目启动后的地址为：http://192.168.0.xxx:8080/index.html（记得关闭电脑的防火墙）

  • 根据项目大小或者业务逻辑决定好技术栈
    • 较麻烦，后续还会持续增加需求：采用vue、react等做SPA页面（单页面在微信内置浏览器里，会存在一个关于分享链接的bug，可见博客：）
    • 简单页面，简单逻辑：采用js/jq+html+css做多页面（移动端的jq应改为zepto.js，可有效避免移动端的点击300ms延迟）

实战

1、弹性盒子模型

2、移动端事件

点击事件click、双击事件、滑动事件 （上滑、下滑、左滑、右滑）、长按事件 摇一摇 、 重力感应等

2.1 click事件

单击事件，类似于pc端的click 。但是在移动端中，连续的click的触发会有 200ms-300ms的延迟

2.2 touch类事件

触摸事件有 touchstart 、touchmove、touchend、touchcancel
touchstart ：手指触摸到屏幕时会触发
touchmove： 手指在屏幕上移动的时候会触发
touchend：当手指离开屏幕的时候会触发
touchcancel： 可由系统进行触发，比如手指触摸屏幕的时候。突然alert一下。或者系统中其他打断touch 的行为。触发该事件

2.3 tap类事件

触碰类事件：【和touch的区别，一般用于代替click事件，有tap long Tap single tapdoubleTap 】
tap: 手指碰一下屏幕会触发
langTap： 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发

2.4 swiper类事件

swiper： 手指在屏幕上滑动会触发
swiperLeft：手指在屏幕上向左滑动会被触发
swiperRight: 手指在屏幕上向右滑动的时候会被触发
swipeUp： 手指在屏幕上向上滑动的时候会被触发
swiperDoen： 手指在屏幕上向下滑动时会被触发

2.5 扩展 pc端事件

a、鼠标类
click、mouseover、mouseout、mouseleave、mouseenter 、mouseup。。。。
b、键盘类事件
keydown 、keyup
c、其他类
load、 blur 、focus 、change

3、transform 详解

4、移动端自定义滑动区域

5、陀螺仪操作

6、多指操作和兼容

7、上滑加载

8、响应式布局

9、滑屏组件： better-scroll