移动端（知识点总结）

如何进行适配

1. 使用@media screen + rem
2. 使用vw、vh
3. 使用flexible.js
4. 使用meta标签里的viewport属性

解决1px问题

1. 设置 border-image / transform: scale(0.5)
2. 使用transfrom + 媒体查询（CSS：@media screen / JS：devicePixelRatio）
3. 使用 box-shadow / background-image 渐变 / viewport + rem

点击事件延迟300ms的解决方案:

1. 禁用缩放：user-scalable=no
2. 使用fastclick.js

点击穿透的解决方案

1. 将click事件改成touch事件(touchstart、touchend、tap)
2. 阻止默认行为：e.preventDefault()
3. 使用fastclick.js

iOS手机容器滚动条滑动不流畅

overflow: auto;
-webkit-overflow-scrolling: touch;

ios的audio无法自动播放、循环播放

var music = document.getElementById('video');
var state = 0;

document.addEventListener('touchstart', function(){
    if(state==0){
        music.play();
        state=1;
    }
}, false);

document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//循环播放
music.onended = function () {
    music.load();
    music.play();
}