web移动端bug总结－微信，uc，ios，andriod,华为,魅族

1，关于ios8以下页面出界的情况

解决方案：

var ScrollFix = function(elem) {// Variables to track inputsvar startY, startTopScroll;elem = elem || document.querySelector(elem);// If there is no element, then do nothingif(!elem)return;// Handle the start of interactionselem.addEventListener('touchstart', function(event){startY = event.touches[0].pageY;startTopScroll = elem.scrollTop;if(startTopScroll <= 0)elem.scrollTop = 1;if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;}, false);};

2，pc端浏览器移动端web页面的时候，禁止滑轮滚动

function noMouseWheel() {    'use strict';    $(document).on('mousewheel DOMMouseScroll', function (e) {        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox        if (delta > 0) {            // 向上滚            return false;        } else if (delta < 0) {            // 向下滚            return false;        }    });}noMouseWheel();

3，移动端表单滑动的时候会有意向不到的bug，解决方案：页面滑动的时候，让键盘收起

demo:

$('#edit-wrapper').scroll(function () {            var scrolls = $(this).scrollTop(); //获取当前可视区域距离页面顶端的距离            if (scrolls >= windowTop) { //当B>A时，表示页面在向下滑动                //需要执行的操作                windowTop = scrolls;                var el = document.activeElement;                if (el.nodeName.toLowerCase() == 'input') {                    el.blur();                    return;                }            } else { //当B                //需要执行的操作                windowTop = scrolls;                var el = document.activeElement;                if (el.nodeName.toLowerCase() == 'input') {                    el.blur();                    return;                }            }        });

4，页面在安卓手机上滑动特别卡：

解决方案：

// 给body 加上  -webkit-overflow-scrolling:touch// 元素节点  添加：overflow:auto;

5，针对移动端对screen.width,window.width,document.body.clientWidth各个手机不同对表达以及如何兼容各个手机


描述：通过测试发现，手机对window.width支持良好，但是iphone6plus中safrai却有误差，支持screen.width;但是，华为uc浏览器却对screen.width运算有误差，而对docment.body.clientWidth可见宽度获取精确；

解决方法：为了兼容手机宽度尺寸争取，统一使用document.body.clientWidth，获取手机屏幕宽度；高度使用document.body.clientHeight;

6，关于移动端keyup事件的另外一种书写方法以及函数节流问题解决方案


描述：我们会发现pc端会很好的支持keyup事件，但是移动端就对此支持较差；另，用input事件也是可以，但是在这个项目中也会有问题，和项目根据搜索提示不符；这样的话，我们可以就用focus和blur事件处理下；


focus和blur事件如下：


```

$input.addEventListener('focus', function () {  //当获得焦点的时候        filter_time();        $destlist.onscroll = function(){            $groupTitle.classList.add('zHide');        };    }, false);    var _str = '', _now = '';    var filter_time = function () {        var _time = setInterval(filter_staff_from_exist, 100);        $input.addEventListener('blur', function () {            clearInterval(_time);        }, false);    };    var filter_staff_from_exist = function () {        _now = trim($input.value.toLowerCase());        if (_now != '' && _now != _str) {            // search(trim($input.value.toLowerCase()));            throttle(queryData,null,100,_now,50);   //调用函数        }        if (_now === '') {            cityListShow();        } else {            cityListHide();        }        _str = _now;    };

```
另外一个问题，就是函数节流的问题，我们会发现当用户输入选择的时候，会不断触发搜索提示判断，但是如果所有数据是ajax请求的话，会增加浏览器负担，影响内存；因此，得处理下搜索判断；


方案：计时器的应用

    function queryData(text){   //处理搜索内容        console.log('搜索:'+text);        search(trim(text.toLowerCase()));    }    // function throttle(fn,context,delay,text){    //     clearTimeout(fn.timeoutId);    //     fn.timeoutId = setTimeout(function(){    //         fn.call(context,text);    //     },delay);    // }    function throttle(fn,context,delay,text,mustApplyTime){ //处理计时器及时清除和搜索        clearTimeout(fn.timer); //首先清除计时器        fn._cur = Date.now();   //纪录当前时间        if(!fn._start){ //若函数不是第一次调用，则直接设置_start，即开始时间,为_cur，即此刻的时间；            fn._start = fn._cur;        }        if(fn._start - fn._cur > mustApplyTime){    //当前时间与上一次函数执行的时间做差，与mustApplyTime做比较，若大于必须执行一次函数，

//若小于则重新计算计时器            fn.call(context,text);  //改变this对象，获取参数            fn._start = fn._cur;        }else{            fn.timer = setTimeout(function(){                fn.call(context,text);  //同上            },delay);        }    }

7，ios10版本以上placeholder的问题；

如果input框中有占位符placeholder的时候，初次点击其它的地方，把值传入到input框的时候，ios10此时placeholder不消失


解决方案：当点击的时候清空placeholder的值，input框获得焦点的时候在写入placeholder的默认值；