web移动端bug总结-微信,uc,ios,andriod,华为,魅族
web移动端bug总结-微信,uc,ios,andriod,华为,魅族
京都玩家 发表于1年前
web移动端bug总结-微信,uc,ios,andriod,华为,魅族
  • 发表于 1年前
  • 阅读 22
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 移动端经常遇见的bug总结;

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的默认值;

共有 人打赏支持
粉丝 0
博文 2
码字总数 3142
×
京都玩家
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: