移动端 web

总体认识

存在形式：

作为 Web App、打包成 Hybrid App、打包成Native App (React Native)、H5页面：嵌入到 Native APP 的 WebView （android：WebView 、 IOS：UIWebView ）

资源：

不复杂的应用不用框架，只要用一些库：Zepto,underscore

一些框架：JqueryMobile/jqmobi/SenchaTouch/ionicframework

移动web开发资源收集：https://github.com/jtyjty99999/mobileTech

优秀实践：

RequireJS（按需加载）+Backbone（组织代码与路由管理）+Zepto（轻量DOM操作） + fastclick.js（点击穿透与延迟处理）+Hammer.js（各种触屏事件）+iScroll5.js（滚动条处理）+Animate.css（CSS3动画）+Enquire.js（处理响应式布局）。

基础知识

屏幕像素
px（pixels） CSS像素（逻辑像素）
dp,dip,pt（deveice independent pixels） 设备无关像素（物理像素,硬件像素,设备像素）
dpr（devicePixelRatio）: 设备像素缩放比，即 1px的长度相当于几个dp的长度
ppi,dpi：单位英寸物理像素数量（像素每英寸）,即像素密度
em: 相对于父元素的font-size的相对单位。
rem: 相对于根元素的font-size的相对单位。优秀实践：用媒体查询设置合适的 html{ font-size: }，其他地方的尺寸都用rem表示
vw: 1%视口宽度
vh: 1%视口高度

iPhone5为例：物理像素：640 * 1136。屏幕尺寸：4英寸。对角线物理像素数：开根号(1136 * 1136 + 604 * 640) = 1304
ppi = 1304 / 4 = 326。默认dpr：2。逻辑像素：568 * 320

ppi与默认dpr对应关系：(规律：每英寸里面的点越多，让越多的点来充当一个px)
          ppi   默认dpr
ldpi   120   0.75
mdpi   160   1.0
hdpi   240   1.5
xhdpi  320   2.0
Retina屏（视网膜屏）: ppi 大于320，默认dpr 等于2.0

ViewPort
手机的逻辑像素比较少，浏览器会使用默认的"布局宽度"（布局视口）进行布局，并将布局宽度缩小到屏幕宽度（视觉视口，可见视口）， 即初始缩放比例为 屏幕宽度/布局宽度

iPhone5为例：默认"布局宽度"为 980px，并默认将980px的视图等比例缩小到屏幕宽度320px

设置视口：
<meta name="viewport" content="width=deveice-width,initial-scale=1,
           mininum-scale=,maximum-scale=,user-scalable=no">
width：布局宽度
initial-scale：初始缩放比例
    如果没设width，只设了initial-scale，那么默认的width为deveice-width
iPhone上，如果没设initial-scale，那么默认缩放到屏幕大小
mininum-scale：最小缩放比例
maximum-scale：最大缩放比例
user-scalable：是否允许用户缩放

视口与JS：
JS可覆盖和修改 meta标签
window.innerWidth 屏幕宽度
document.documentElement.clientWidth 布局宽度
screen.width  物理像素
window.devicePixelRatio  屏幕dpr
orientationchange  屏幕转向事件

Flex 布局（弹性布局）

见文章《布局》

媒体查询

见文章《响应式布局》

click事件延迟
单击后，浏览器等300ms ，来确定会不会是双击。就导致单击事件回调，延迟了300ms。
解决：用zepto.js的tap事件代替click事件。$("#id").on('tap',function(){});
tap事件原理：对比touchstart、touchend的位置和时间间隔，来判断是不是单击
点透bug：场景（两个重叠的层，上层绑定tap事件，让上层消失），
         bug（会触发下层的click事件），
原因（点击后，浏览器等待300ms，此时上层已经消失，就认为是点击了下层）
解决（上层过渡300ms消失，下层也用tap事件）
 
触摸事件
touchstart、touchend、touchmove、touchcancel

H5

H5 调用 native

//native代码：
 WebSettings webSettings = webView.getSettings();
 webSettings.setJavaScriptEnabled(true);                       // 打开JS通道
 webView.addJavascriptInterface(new JsInterface(), "control"); // 设置JS接口
 
 public class JsInterface {
        @JavascriptInterface  // android 4.2 以后，有这个注解的方法 才能被 JS 访问
        public void do(String s) {
            log(s);
        }
    }

//H5代码:
  javascript:control.do('some');
  
native 调用 H5
webView.loadUrl("javascript:do();");  // do 是一个全局函数

H5 会话：
1、native将会话信息 设置进 webview 的 cookie
2、native将会话信息 加到 url 的参数里
H5 登陆状态调试：
1、在web端登陆，复制其cookie中的会话信息，再在H5中用JS 将会话信息 写入cookie
2、H5坐一个登陆页面，未登陆就跳到此页面进行认证，登陆后再调试

远程调试

Weinre(WebInspector Remote) web远程检查器
1、安装命令行工具：npm -g install weinre
2、启动Debug Server（Agent）：weinre --boundHost 本地IP
3、用浏览器访问服务说明：http://本地IP:8080/
4、植入Debug Target脚本：复制服务说明上”Target Script“ 下的<script>到项目代码里
5、在其他浏览器（例如手机浏览器）访问项目
6、访问Debug Client: 访问服务说明上“Access Points” 下的 “debug client user interface” 链接
7、选择Target：在 Debug Client 上 Remote -> Targets 下，点击一个链接，即选择了一个Target。（有多处同时访问项目就会有多个Target）
8、调试

 优化

移动端优化
1、优化等待体验：显式加载效果，滚到可视范围再加载响应资源
2、减少图片：用样式和iconfont代替图片
3、重视渲染优化，见上方
4、动画，过渡，转换使用CSS，而不是JS。可以触发GPU硬件加速