文档章节

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

京都玩家
 京都玩家
发布于 2016/12/02 23:30
字数 954
阅读 45
收藏 0
点赞 0
评论 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的默认值;

© 著作权归作者所有

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

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

游星啊
04/24
0
0
Xamarin开发Anroid应用介绍

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

大学霸
2015/04/07
0
0
华为高级程序员月薪曝光:270k封神,众网友表示长了见识

华为高级程序员月薪曝光:270k封神,众网友表示长了见识 2018-06-11 18:32编辑: yyuuzhu分类:程序人生来源:代码湾 程序员月薪 招聘信息: C++工程师 Cocos2d-x游戏客户端开发 iOS开发工程...

yyuuzhu
06/11
0
0
移动设备(手机)的唯一ID有哪些

在移动广告领域,设备的ID 是用来追踪一个人的最重要的标识。 对于APP自身产品而言,使用设备唯一ID可以追踪到用户从下载到激活、注册、使用、流失、回归的全流程数据,对产品运营工作非常有...

IVAN_jsjwk
05/29
0
0
你见过最目瞪狗呆的bug是什么?

你见过最目瞪狗呆的bug是什么? 2018-05-28 14:01编辑: garace分类:程序人生来源:代码湾 bug网上注册刘伟楠 招聘信息: C++工程师 Cocos2d-x游戏客户端开发 iOS开发工程师 京东招聘iOS开发...

garace
05/28
0
0
JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士。曾任沈阳东软股份项目经理。51CTO学院签约讲师。从事软件研究和开发超过20年。长久以来一直从事Java、Android、iOS、C++、Swift、Objective-C以及跨...

androidguy
06/29
0
0
zymedia的在使用中碰到的问题

记笔记,免忘记!最近用到了视频插件zyMedia。这个插件的简介地址:https://github.com/ireaderlab/zyMedia 问题一: 首先视频的上方显示的标题,实例是这样写的data-config='{"mediaTitle":...

zilvzsy
05/12
0
0
常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果...

webmirror
05/02
0
0
IOS和安卓ui设计常用尺寸及基本知识

IOS和安卓ui设计常用尺寸及基本知识 iOS app iOS app 图标的圆角半径是多少? 括弧里面是对应的半径大小 App store(Retina屏) ─────────────1024px(160px) iTunes Artwork i...

-Man
2015/11/19
0
0
App打开微信小程序并传递参数

在App中打开小程序的功能发布有一段时间了,网上关于这个的新闻很多,但是技术资料并不多,我们有项目需要尝试这种方式,特意试了一下,发现还是有一些坑,分享给大家。 首先微信官方文档在微...

voxer
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 2.18版本发布:支持Git协议v2,提升性能

Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能 新版本协议的主要驱动力是使 Git 服务端能够对各种 ref(分支与 tag)进行过滤操作。 这就意味着,G...

linux-tao
7分钟前
0
0
python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
24分钟前
20
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
29分钟前
0
0
PowerDesigner 16.5 安装配置

PowerDesigner16.5破解版是一款业内领先且开发人员常用的数据库建模工具,PowerDesigner可以从物理和概念两个层面设计数据库,方便用户制作处清晰直观的数据流程图和结构模型,欢迎有需要的朋...

Gibbons
54分钟前
0
0
mac Homebrew 指令积累

1通用命令 brew install [包名] //安装包 brew list //列举安装的包 brew info [包名] // 显示安装包的详细信息 mysql 相关 #启动mysql 服务 brew service start mysql my...

Kenny100120
今天
0
0
前端Tips: 创建, 发布自己的 Vue UI 组件库

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: n...

ssthouse_hust
今天
1
0
大数据教程(2.13):keepalived+nginx(多主多活)高可用集群搭建教程【自动化脚本】

上一章节博主为大家介绍了目前大型互联网项目的keepalived+nginx(主备)高可用系统架构体系,相信大家应该看了博主的文章对keepalived/nginx技术已经有一定的了解,在本节博主将为大家分享k...

em_aaron
今天
4
0
Git 2.18版本发布:支持Git协议v2,提升性能

在最新的官方 Git 客户端正式版2.18中添加了对 Git wire 协议 v2 的支持,并引入了一些性能与 UI 改进的新特性。在 Git 的核心团队成员 Brandon Williams 公开宣布这一消息前几周,Git 协议 ...

六库科技
今天
0
0
Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
今天
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部