移动端

1 在移动端页面上双击会放大的问题
在移动端中，会出现双击的时候 页面会放大，问题在于在设置的时候
并没有设置好媒体查询的问题。
例：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

在如上的代码中 ：
width: 控制Viewport的大小，device-width是屏幕的宽度
initial-scale: 初始缩放比例，即用户第一次打开页面的显示比例
initial-scale里包括如下内容：
maximum-scale: 允许用户缩放的最大比例
minimum-scale: 允许用户缩放的最小比例
user-scalable: 用户是否可以手动缩放，默认值yes
为了保证不会出现双击放大的效果 在这里要添加一段代码 “user-scalable=no”
2 适配问题
准备工具：
js插件：app.js css插件：rest-rem.css
（1）长度单位 em rem
在移动端中多用em rem 代替px 表示长度单位
区别：em 是相对于当前位置父集的font-size
rem则是相对于根元素的fon-size
（2）插件
1 ）app.js
原理：用js获取屏幕的宽度 计算rem的大小
app.js 需根据设计图的大小 改变初始的屏幕的宽度
640px的设计图 宽度为320
750px的设计图 宽度为375
注：写页面的时候 在设计图上量出的px的大小除100 就是 转化后的rem的值
app.js的写法：
（1）引入js插件

<script src="app.js"></script>

（2）写样式：

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 0.82rem;
            height: 0.82rem;
            background: red;
        }
    </style>

需要注意的是： 在写样式的时候 需加入：margin：0；padding：0；
用
2 rest-rem.css
原理：用媒体查询的方式 根据屏幕的宽度改变

根据设计图呈现的px除2  最后进行整体的转化

如果设计图为640px  转化比例为32

如果设计图为750px  转化比例为37.5

***注：app.js  rest-rem.css不能同时使用***

rest-rem.css的写法：
引入css文件：

<link rel="stylesheet" href="reset-rem.css">

之后再写样式
在这种写法中，有一个转化的专门网页，用于解决关于px转rem的问题
网址：http://www.ofmonkey.com/front/rem

3 移动端的原生事件
1)touchStart
在移动端中 touchstart可代替click事件
因为click在移动端有200ms的延迟
2)touchMove
3) touchEnd

判断左滑右滑（上滑下滑）
代码：

var moveX   moveY  endX  endY;
鼠标按下：
document.addEventListener("touchstart",function(ev){
var  event=window.event||ev;
moveX=event.touches[0].pageX;
//moveY=event.touches[0].pageY;
})
鼠标移动：
document.addEventListener("touchmove",function(ev){
var event=window.event||ev;
endX=event.touches[0].pageX;
//endY=event.touches[0].pageY;
})
判断左滑右滑（上滑下滑）：
document.addEventListener("touchend",function(ev){
	if(endX-moveX>0){
	console.log("向右滑")
	}
	if(endX-moveX<0){
	console.log("向左滑")
	}
	/*
	if(endY-moveY>0){
	console.log("向上滑")
	}
	if(endY-moveY<0){
	console.log("向下滑")
	}

*/
})

阻止默认事件

document.addEventListener("touchmove",function(ev){
	var  event=window.event||ev;
	},{
	capture:false，  冒泡或者捕获
	once：false，	是否执行一次
	passive：false   是否可以阻止默认事件  false  可以阻止true不能阻止
	
})

给document绑定touchmove事件时不能阻止默认事件，
// 事件监听 第三个参数 现在多了一种写法，可以是一个对象

附件：
每个触摸事件包括三个触摸列表：
1）touches：当前屏幕上所有触摸点的列表
2）targetTouches：绑定事件的那个节点上的触摸点的集合列表
3）changedTouches:触发事件时的改变的触摸点的集合