移动端开发分为4类
Native（原生 APP）
使用 Java/Objective-C/Swift 开发Webapp
在手机浏览器上展示的网页Hybird（混合应用）
Native + Html
比较
开发成本
开发App成本比较大：android + ios+前端+后台
Webapp=微信小程序：前端更新
Native：需要提示用户更新下载新版本
Webapp=Hybird=小程序： 不需要用户更新下载新版本性能体验
Native：体验最佳，速度快，功能强大
Hybird：次之
Webapp：最差
- 安装方式
Native=Hybird：下载安装
Webapp：无需下载 - 跨平台
andriod平台
ios平台
Webapp：不需要考虑平台
移动端和 PC 的区别
开发流程一样：psd稿子->切图->分析功能->>写html->写css->写js
1.触摸事件
touchstart, touchend, touchmove, touchcancel
touchcancel：系统取消touch事件的时候触发（不常用）
touchstart立即响应
node.addEventListener('touchstart', function(){
console.log('start touch')
})
node.addEventListener('touchend', function(){
console.log('')
})
JS没有滑动事件，我们可以用触摸点的坐标来判断滑动方向。
2.移动端 300ms 延时
300ms 延时的原因
出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟。
2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的，当属双击缩放(double tap to zoom)，浏览PC页面时，默认缩小显示（980px的视窗宽度），用手指在屏幕上快速点击两次，Safari 浏览器会将网页缩放至原始比例。
假定用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
避免300ms延时的方法
方案一：禁止缩放，就无需等待300ms
<meta name="viewport" content="user-scalable=no"> 禁止用户缩放
<meta name="viewport" content="initial-scale=1,maximum-scale=1"> 禁止浏览器缩放
方案二：更改默认的视口宽度
用 <meta> 标签配置width=device-width。
<meta name="viewport" content="width=device-width">将视口大小设为设备本身的尺寸
Chrome 32对包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。没有双击缩放就没有 300 毫秒点击延迟。
iOS 9.3 中：Safari 针对移动版的网页去掉了点击时的 300ms 延迟。对于网页开发者来说，不再需要引入类似 FastClick 这样的 Hack 了。双击放大的功能仍然可用，但是必须点击链接之外的地方才有效（否则就直接进入链接了）
方案三：CSS touch-action: manipulation;
CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）
移动端300ms延迟，就可以使用touch-action: manipulation;来解决。
manipulation:
浏览器只允许进行滚动和持续缩放操作，禁用其他非标准手势，例如双击以进行缩放，也就没有300 毫秒点击延迟啦。
方案四：使用fastclick库
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。用法很简单：
//引入fastclick.js
<script type='application/javascript' src='/path/to/fastclick.js'></script>
//在body里面写
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
3.常见手势
但原生js只有touchstart, touchend, touchmove事件， hammerjs 为我们实现了一个手势库
4.滚动
以往我们可以通过CSS的overflow:scroll或者overflow:auto实现滚动，但是在移动端这样效果不好。可以使用iscroll
5.需要设置viewport来控制屏幕全屏显示，禁止缩放
inital-scale页面初始的放大倍数，maximum-scale最大放大倍数
user-scalable=no 页面不可以放大缩小
<meta name="viewport" content="width=device-width, height=device-height, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
6.页面适配-动态 rem （移动端方案，不是响应式）
响应式方案
目的是一份代码解决手机、平板、电脑的页面适配。
- meta:vp禁止缩放
<meta name="viewport" content="width=device-width, height=device-height, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> - 尽量不要写width/height，该用max-width/max-height
- 多用flex布局
- media query
动态 rem方案
而动态 rem是只针对移动端页面的适配方法。例如手机淘宝 在移动端宽度不适合再用固定宽度px，我们希望整体等比缩放。如果用媒体查询的响应式，那么对于宽度不同的手机，显示页面内容的宽度仍然一样，内容居中，只是两边留白宽度不同。
rem是CSS3新增的一个相对单位（root em，根em），相对的只是HTML根元素（1rem=html font size）。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应（em也是相对长度单位，但会继承父级元素的字体大小）。
rem是相对于根节点html的font-size的倍数，浏览器对font-size值有限制，一般font-size最小值默认为12。
动态 rem方案1
- meta:vp禁止缩放
<meta name="viewport" content="width=device-width, height=device-height, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> - document.documentElement.clientWidth动态获取页面宽度
- 赋给html的font-size，即拼接成
html{font-size:'+document.documentElement.clientWidth +'px;} - 所有需要跟视觉稿一致的地方，按比例算出rem值
示例1
动态rem方案2
- meta:vp禁止缩放
<meta name="viewport" content="width=device-width, height=device-height, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> - document.documentElement.clientWidth动态获取页面宽度width
- 赋给html的font-size，即拼接成
html{font-size:'+ width/10 +'px;} - 10rem==页面宽度width
- 所有单位都用rem == 所有长度都以页面的宽度为基准
示例2
动态rem方案3 + retina下，border: 1px问题
- 普通屏幕
CSS 1px == 设备的1px - 在Retina
CSS 1px == 设备的2px
设计师要求 border-width == 设备的1px
所以我们让border-width ：0.5px== 设备的1px（兼容性有问题，不是所有的浏览器都支持0.5px）
解决方案：
1.获取设备 像素比window.devicePixelRatio
2.var sacle = 1/window.devicePixelRatio;
3.让rem变为rem*像素比
4.border-top:1px solid red;
示例3
移动端高清、多屏适配方案-阿里
移动web适配-rem-腾讯
动态rem方案可以被css3中相对长度单位vw 取代
查看浏览器对vw的支持情况
vw 相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度
vh 相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh = 可视区高度
7.开发调试
PC端：采用本地编写，浏览器查看，dev-tools调试
移动端：npm install browser-sync 用于在手机端验证和调试。手机通过连接局域网地址也可以访问页面。
$ browser-sync
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.10.101:3000
---------------------------------------
UI: http://localhost:3001 (调试地址)
UI External: http://192.168.10.101:3001
8.移动端解决方法收集
https://github.com/jtyjty99999/mobileTech/blob/master/README.md
image place holder占位图片定制化
