移动端自己的总结
1: 独立像素：ios: 称为pt; 安卓称为dp;
1pt = 1px(iphone 3)/ 2px(iphone4) /3px;
获取独立像素： window.devicePixelRatio; 电脑100%时候 1px = 1px; 得到的是1, 50%时候，得到的是0.5 200%时候得到的是2
2: 物理像素：相当于设备的宽高,是固定的，比如电脑：一般是1920*1080 分辨率越低，物理像素越大，分辨率越高，物理像素越小，物理像素越小，屏幕渲染越精细，画质越好
获取物理像素：window.screen,width; window.screen.height; 获取时可能会有误差
3: css像素：可以看到的像素大小;
var width = document.documentElement.clientWidth;缩放会改变，相当于css像素
var height = document.documentElement.clientHeight;
var w = window.screen.width;缩放不会改变，相当于物理像素
var h = window.screen.height;
4: 二倍图在二倍设备上显示，三倍图在三倍设备上展示
5: 调试：https://www.cnblogs.com/liutao8888/p/10004499.html / ghostlab（移动设备和服务器的网络是一样的）第三方调试工具，收费，可以下载卸载一直点试用
6: 视口viewport,用来显示内容，pc端视口大小和浏览器大小一样，获取当前视口：
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
pc端：如果父元素设定固定宽高，缩小屏幕小于该宽度时，下面会出现滚动条，如果不想出现滚动条，可以父元素跟子元素都按百分比设置，父元素设置width: 100%;
移动端： viewport (layout viewport 布局视口即可视区的尺寸 )是开发人员自由设置的，为了能够正常显示那些专为pc设计的网页，一般这个值得大小会大于屏幕的尺寸
默认viewport大小: iphone: 980 ipad: 980 安卓: 980 chrome: 980 IE: 1024
ideal(理想)viewport: window.screen.width + window.screen.height获取，默认ideal viewport苹果6,7,8是width: 375
前端开发中ideal viewport和layout viewport并不一致，这时候需要把layout viewport设置成ideal viewport大小；设置方法：<meta name="viewport" content="">，这个只在移动端有效
移动web常见设置： 快捷键：meta:vp+tab
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width">和<meta name="viewport" content="initial-scale=1">这两个效果一样，为了避免兼容性问题，所以都写
a) width:
设置layout viewport 的宽度，为一个正整数，或字符串" device- width"
b) initial-scale:
设置页面的初始缩放值，为一个数字，可以带小数 initial-scale（初始缩放）＝ ideal viewport / layout viewport
c) minimum-scale:
默认状态下最小的缩放比例
d) maximum-scale:
允许用户的最大缩放值，为一个数字，可以带小数
e) height:
设置layout viewport 的高度，这个属性对我们并不重要，很少使用
f) user-scalable:
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
解决横向滚动条的问题：即把宽度设置成百分比就行了
超小屏幕（移动设备） 768px以下 小屏设备 768px-992px 中等屏幕 992px-1200px 宽屏设备 1200px以上
7: 主流移动web站点：轮播图 → 导航栏 → 产品信息
8: 移动端的浏览器相对单纯些，基本都是基于webkit内核：ＱＱ浏览器、百度浏览器、苹果浏览器、ＵＣ浏览器
操作平台：ios、安卓
浏览器：系统自带、内置应用（qq、微信、微博、淘宝等app会内置浏览器webView，实际开发中这个重要）、第三方: 自己安装的火狐，谷歌，360等
9: 触屏事件：移动端添加事件一般用addEventListener("事件名称"，function(){});
touchstart: 手指触摸屏幕时开始触发
touchmove: 手指在屏幕上移动时触发，是持续触发的
touchend：手指离开屏幕时触发, 这时候手指已经离开，事件获取e.clientX等事件中不能用targetTouches,而要用changedTouches
webkitTransitionEnd: 监听元素的过渡效果执行完毕之后，触发
touchcancel: 触摸时意外终断，比如打游戏来了个电话
touch事件（e）对象：
touches: 指屏幕上的所有手指对象
targetTouches: 当前元素上的手指对象、（常用）
chengedTouches: 当前屏幕上变化的的手指对象，从无到有，从有到无，在startend时使用
touches和targetTouches在测试中没有区别
e.targetTouches —— TouchList
TouchList里面相当于一个数组：
*** touch事件的触发必须保证元素有宽高值，如果宽高为０，则不会触发
上述事件执行过程中会bug, 如果客户拖动较快会出现白屏，是因为客户拖动之后，过渡效果没有执行完导致，这时候需要设置一个监听对象，flag = true; fiag为true时候，touchmove里面的代码才执行，touchend时，fiag为false, 并且以前的moveX,distanceX,startX都设置为０，下一次重新赋值，webkitTransitionEnd时候即动画效果完成之后再执行fiag为true，这时候需要清除定时器，然后再开启一个新的定时器，可以放在一个setTimeout（500毫秒）里执行，比较严谨.
10: Zepto.js https://www.runoob.com/manual/zeptojs.html 移动端的jquery
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
分模块，不同的功能分装在不同的模块里面，默认的只有前５个，https://github.com/madrobby/zepto下载地址,用那一部分就引入哪一部分的js
11: fastclick.js 实现移动端的点击事件 https://github.com/ftlabs/fastclick
fastclick.js的用法，下载，然后把lib文件夹下的js文件放到我们的文件夹中，引入这个插件，然后写下面的内容
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
// document.body可以改成任意元素，如果直接写document.body，则表示，下面的所以的dom元素都会使用这个插件
FastClick.attach(document.body);
}, false);
}
// 下面的元素就正常写就行
btn.addEventListener("click",function(){
btn.style.visibility="hidden";
})；
12: iScroll.js 主要实现滚动滑动操作 参考地址：http://caibaojian.com/iscroll-5/versions.html 下载地址：https://github.com/cubiq/iscroll
build文件夹里面有5个Scroll的版本，一般iScroll.js就可以
结构：
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
js:
<script type="text/javascript">
//元素名称可以变，根据自己设置，上下保持一致即可
//var myScroll = new IScroll('#wrapper'); //基础设置，如果需要用到滚动条，则选择下面的
var myScroll = new IScroll('#wrapper', {
mouseWheel: true, //鼠标滚轮支持
scrollbars: true //滚动条支持 添加之后滚动条默认的位置是浏览器的右边，如果需要设置在盒子右边，直接给盒子加一个relative的样式
});
</script>
滚动的条件是子容器和父容器都要有高度 ，父容器的高度必须小于滚动的子容器的大小，所以设置父容器的高度是100%;
13: swipe.js 实现轮播图的效果插件 https://github.com/thebird/swipe/
html结构:
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>
css样式:
.swipe {
overflow: hidden;
visibility: hidden;//这个功能使banner刚开始默认不可见，加完js之后会显示出来
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
js使用: swipe 可以改成自己项目实际的标签
window.mySwipe = Swipe(document.querySelector(".swipe "),{
// 配置选项
startSlide: 2, 开始滚动的位置，默认是０，可以默认，不写
speed: 400, 效果的时间，默认300，可以默认，不写
auto: 2000, 自动轮播的时间，必须要加，不加不会自动轮播
continuous: true, （滑到最后直接到第一）即无限循环，默认是，可以不写
disableScroll: false, 是不是不让做滑动，默认不是，即可以手动滑动，默认是false；可以默认，不写
stopPropagation: false, 是不是阻止不让事件冒泡，默认是false；可以默认，不写
callback: function(index, elem) {}, 轮播图运行中的回调函数 根据需求， 可以来加下面的小点函数
transitionEnd: function(index, elem) {} 动画运行结束的回调函数 根据需求
});
扩展函数：使用的时候直接调用就行
prev() 上一页
next() 下一页
getPos() 返回当前div（class='wrap'的div）的索引
getNumSlides() 返回滑块总数
slide(index, duration) 设置滑到的索引 (duration: 转化的速度，单位毫秒)
document.getElementById("prev").onclick=function(){
window.mySwipe.prev();
}
14: swiper.js 轮播图，滑动插件，功能强大
https://github.com/nolimits4web/Swiper/下载地址
https://www.swiper.com.cn/usage/index.html使用方法
API(Application Program Interface): https://www.swiper.com.cn/usage/index.html
下载之后，解压，打开package文件夹，里面的js和css文件夹里面有js和css文件
css的类名要用框架的名字，js的名字可以自定义
移动端会出现的问题
1: 元素点击时会出现一个淡蓝色的背景高亮显示，去除背景高亮显示： -webkit-tap-highlight-color: transparent;
2: 如果盒子用了position: fixed;这时候他的宽度是根据默认视口走的，会超过父元素的最大宽度，这时候，宽度需要加max-width: 640px;
.top_search{
width: 100%;
height: 40px;
position: fixed;
max-width: 640px;
}
3: 静态图片放在images里面，动态图片放在uploads里面
4: 轮播图banner部分的偏移，默认应该显示索引为１的图片，这时候需要让父容器偏移
ａ：父容器偏移，用transform: translateX(-10%);
ｂ：图片的父容器定位，这时候要用position: relative; 不能用position: absolute;因为父容器的高度是子元素撑开的，用absolute;高度会出现问题。
5: 如果变量中有的值获取的时候是固定的，那么设置完之后，屏幕变化，值会出现错误，这时候需要window.onresize ＝function(){};把之前写的变化，放在这个里面再写一遍；
6: 轮播图手指移动的时候，除了第一张比较快之外，其他都比较慢，是因为有过渡效果，这时候需要把元素的过渡效果设置为none;
bannerImg.style.transition = "none";
7: 移动端的click事件有延迟（移动端需要判断是单击还是双击，所以会延迟单击事件的触发），很少用
单击操作特点：
ａ：只有一个手指
ｂ：手指开始触摸和松开的事件差异不能大于特定值，比如300毫秒，超过就相当于长按
ｃ：保证没有滑动距离，或者滑动距离不能超过特定值，比如5px;
自己封装tap事件：
function tap(obj, callback){
if (!obj || typeof obj != "object") {
return;
};
var startX,startY,endX,endY,startTime,endTIme;
obj.addEventListener("touchstart", function(e){
if(e.targetTouches.length > 1){
return;
}
startTime=Date.now();
startX = e.targetTouches[0].clientX;
startY = e.targetTouches[0].clientY;
});
obj.addEventListener("touchend", function(e){
if(e.changedTouches.length > 1){
return;
}
endTIme = Date.now();
endX = e.changedTouches[0].clientX;
endY = e.changedTouches[0].clientY;
if (endTIme - startTime > 300) {
return;
};
if ((Math.abs(endX - startX) < 5) && (Math.abs(endY - startY) < 5)) {
callback && callback();
};
});
}
自己封装tap事件,或者zepto中的tap事件，但是都会有类似于事件冒泡（点透）的bug，touch事件只能在移动端使用，如果想在移动端和pc端都可以使用的话，
为了解决所有的问题，可以使用fastclick.js的插件
8: 加了setInterval(fn, 500);的盒子，最好先请清除定时器，然后再打开定时器，否则会触发多个定时器.
9: 页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
10: 移动app里面的页面，Navigation bar（导航条）不用自己弄，系统会自带，我们只需要做中间的h5页面就行
