移动端入门

移动端开发分为4类

Native（原生 APP）
使用 Java/Objective-C/Swift 开发
Webapp
在手机浏览器上展示的网页
Hybird（混合应用）
Native + Html
微信小程序
https://www.zhihu.com/topic/20061410/hot

比较

开发成本
开发App成本比较大：android + ios+前端+后台
Webapp=微信小程序：前端
更新
Native：需要提示用户更新下载新版本
Webapp=Hybird=小程序：不需要用户更新下载新版本
性能体验
Native：体验最佳，速度快，功能强大
Hybird：次之
Webapp：最差

安装方式
Native=Hybird：下载安装
Webapp：无需下载
跨平台
andriod平台
ios平台
Webapp：不需要考虑平台

移动端和 PC 的区别

开发流程一样：psd稿子->切图->分析功能->>写html->写css->写js

移动端vsPC端，移动端的布局更简单

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

 禁止用户缩放
 禁止浏览器缩放

方案二：更改默认的视口宽度
用标签配置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


//在body里面写
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

3.常见手势

image

但原生js只有touchstart, touchend, touchmove事件， hammerjs 为我们实现了一个手势库

4.滚动

以往我们可以通过CSS的overflow:scroll或者overflow:auto实现滚动，但是在移动端这样效果不好。可以使用iscroll

5.需要设置viewport来控制屏幕全屏显示，禁止缩放

inital-scale页面初始的放大倍数，maximum-scale最大放大倍数
user-scalable=no 页面不可以放大缩小

6.页面适配-动态 rem （移动端方案，不是响应式）

响应式方案

目的是一份代码解决手机、平板、电脑的页面适配。

meta:vp禁止缩放
尽量不要写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禁止缩放
document.documentElement.clientWidth动态获取页面宽度
赋给html的font-size，即拼接成html{font-size:'+document.documentElement.clientWidth +'px;}
所有需要跟视觉稿一致的地方，按比例算出rem值
示例1

动态rem方案2

meta:vp禁止缩放
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占位图片定制化