文档章节

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

京都玩家
 京都玩家
发布于 2016/12/02 23:30
字数 954
阅读 83
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
上一篇: 前端js规范
下一篇: 前端js规范
京都玩家
粉丝 0
博文 2
码字总数 3142
作品 0
朝阳
前端工程师
私信 提问
赛诺:Q1中国智能机销量OPPO居首 华为荣耀分列四五位

赛诺:Q1中国智能机销量OPPO居首 华为荣耀分列四五位 2018-04-24 17:06编辑: 游星啊分类:业界动态来源:新浪科技 智能机智能机市场智能机销量 招聘信息: C++工程师 Cocos2d-x游戏客户端开发...

游星啊
04/24
0
0
中国市场目前最热销的10款手机:前两位无悬念 苹果6秒小米8

中国市场目前最热销的10款手机:前两位无悬念 苹果6秒小米8 2018-07-24 16:09编辑: suiling分类:业界动态来源:叮当数码 苹果手机中国畅销榜 招聘信息: iOS开发 iOS开发 iOS开发 app开发上...

suiling
07/24
0
0
Xamarin开发Anroid应用介绍

第1章 Xamarin开发Anroid应用介绍 如今智能手机已经盛行了好几年,而针对这些智能手机的软件开发也变得异常火热。但是在Android平台下只能使用Java开发,iOS平台下也只能使用Objective-C或S...

大学霸
2015/04/07
0
0
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案

相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和ios...

大灰狼的小绵羊哥哥
09/13
0
0
Android P正式版即将到来:后台应用保活、消息推送的真正噩梦

1、前言 对于广大Android开发者来说,Android O(即Android 8.0)还没玩热,Andriod P(即Andriod 9.0)又要来了。 下图上谷歌官方公布的Android P发布路线图: Android P的最后一个开发者预...

JackJiang2011
08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

POSIX正则

简介 因为之前对于POSIX类的正则表达式使用的比较少,也就没有上心去记忆,最近因为使用的比较多,就仔细的看了一下做了一个简单的总结。 表达式 \p{Lower} 小写字母字符:[a-z] \p{Upper} 大...

trayvon
26分钟前
0
0
soapui的安装使用

https://blog.csdn.net/weiqing723/article/details/78865734

暗中观察
31分钟前
0
0
ACID学习记录

ACID的C即一致性,打比方,多个线程并发执行转账业务:A转给B一块钱,无论成功与否(A+B)的总额是不会变的。事务执行前与执行后数据内在的逻辑始终是成立的。这里就是转账前与转账后两人存款的...

wmzsonic
46分钟前
0
0
手写tomcat+servlet

写程序一定要有思路,思路很重要! 一、我们分两步第一步先实现手写tomcat,第二部写servlet 所用技术: 1、soket通信 IO流 2、http请求与相应 3、解析xml 4、java反射技术 导入所需要的jar...

jason_kiss
今天
1
0
Beetl模板的基础用法 【变量、循环、条件】---《Beetl视频课程》(2)

本期视频做了一个博客的首页列表; 内容简介:springboot 集成 beetlsql;使用for循环,使用if控制语句,使用虚拟属性,定义变量等等 一起学beetl目录:https://my.oschina.net/u/1590490?ta...

Gavin-King
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部