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

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

解决方案：

var ScrollFix = function(elem) {
	// Variables to track inputs
	var startY, startTopScroll;
	
	elem = elem || document.querySelector(elem);
	
	// If there is no element, then do nothing	
	if(!elem)
		return;

	// Handle the start of interactions
	elem.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的默认值；