移动端页面开发步骤(流程)

一、阻止默认事件

原因：1、避免长按文字时，选中了文字。

　　　2、去掉橡皮筋效果，自己做。

// 0.检测passive问题
            /*
             这段代码为 passive 属性创建了一个带有getter函数的 options 对象；getter设定了一个标识， passiveSupported，
             被调用后就会把其设为true。那意味着如果浏览器检查 options 对象上的 passive 值时， 
             passiveSupported 将会被设置为 true；否则它将保持 false。然后我们调用 addEventListener() 
             去设置一个指定这些选项的空事件处理器，这样如果浏览器将第三个参数认定为对象的话，这些选项值就会被检查。
             * */
            function isPassive() {
                let passiveSupported = false;
                try {
                  let options = Object.defineProperty({}, "passive", {
                    get: function() {
                      passiveSupported = true;
                    }
                  });
                  window.addEventListener("test", null, options);
                } catch(err) {}
                return passiveSupported;
            }
            // 1.全面禁止移动端事件
            // passive 参数不能省略，用来兼容ios和android；用来告知浏览器，监听器里面有阻止默认行为，那么浏览器就会直接禁止掉
            // touchstart事件默认行为，再去执行监听函数，而不需要执行完监听器之后再做阻止默认行为的情况，从而达到提高性能情况
            // https://www.cnblogs.com/ziyunfei/p/5545439.html
            document.addEventListener('touchstart', function(ev){
                ev = ev || event;
                ev.preventDefault();
            }, isPassive() ? { passive: true } : false);

二、阻止了默认事件，存在很多其他的事件效果也会失效，例如a标签的跳转等，此类情况可以针对某个元素进行绑定事件，同时阻止事件冒泡即可。

domNode.addEventListener('touchstart',function(ev){
    ev = ev || event;
    // do something
    ev.stopPropagation();
})

三、确定适配方案，常用适配方案：rem适配、viewport适配、百分比适配

　　rem适配（配合less或者sass可以做到所量即写）

(function(){
    let w = document.documentElement.clientWidth / 16;
    let styleNode = document.createElement('style');
    styleNode.innerHTML = "html{font-size:"+w+"px !important;}";
    document.head.appendChild(styleNode);
})();

 　　viewport适配

(function(){
    // 获取理想视口的宽度
    let clientWidth = document.documentElement.clientWidth;
    // 设计稿的宽度为750px
    let targetW = 750;
    let scale = clientWidth / targetW;
    let metaDom = document.querySelector("meta[name='viewport']");
    // 设置initial-scale
    metaDom.content = "initial-scale="+ scale + ",minimum-scale="+ scale + ",maximum-scale=" + scale
})();

　　百分比适配可以和以上两种适配方案混用。

 四、自定义滚动条