移动端H5页面遇到的问题总结
最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿吧,也在文末留下自己未能解决的疑问,希望看到的朋友能解惑。
都知道做移动端的开发,在电脑上调试好了的东西,放在手机里可能真的秒秒钟就炸了,我发誓绝对没想到炸的这么快。。。
1、IOS监听不到input框输入中文的keyup事件
这个小标题好像不太明确,大概就是,APP中有一个列表显示的页面,页面上有个搜索功能,使用keyup监听input框,每一次keyup都去检索一下缓存数据有没有符合的数据,然而、然鹅,IOS上并没有能在每一次keyup都去检索,经过各种查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或者数字的keyup,检测不到中文的keyup,(至于标点那些,就没有深究了),在输入中文之后需要点击回退按键,才会开始搜索,我自己能想到的办法就是定时检测setInterval,我也只能想到这办法了,但是总觉得不太好,于是搜索到了这个办法(http://blog.csdn.net/lytlx/article/details/50845259), 把keyup事件换成“input”和“propertychange”事件。
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:
oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
- 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
- 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
- 修改了 select 元素的选中项,selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称,这样看来,oninput & onpropertychange 似乎是监听输入框值变化的最佳方案。
原来的代码:
$(".ui-searchbar-input input").keyup(function () {
////
});
修改后的代码:
$(".ui-searchbar-input input").bind("input", function () {
////
});
这样一改之后,IOS也能正常啦~~~~
2、使用touchstart、touchmove、touchend导致页面不能滑动
页面上有个水滴状的图片,要求水平拖动修改余额显示,自然而然想到的就是用touchstart、touchmove、touchend来搞定了,由于是初次使用,免不得会偷懒,从网上找了一些使用代码来缝缝补补,改成自己想要的效果,以下是初始代码,也就是导致页面不能滑动的罪魁祸首:
$("#img-balance").on("touchstart", function (e) {
var touches = e.touches[0];
oW = touches.clientX - $(this).offset().left;
oH = touches.clientY - $(this).offset().left;
$(document).on("touchmove", function (event) {
event.preventDefault();
}, false);
});
$("#img-balance").on("touchmove",function(e){
var touches = e.touches[0],
oLeft = touches.clientX - oW;
if (oLeft < 20) {
oLeft = 20;
} else if (oLeft > document.documentElement.clientWidth - 45) {
oLeft = document.documentElement.clientWidth - 45;
}
$(this).css("left", oLeft + "px");
mainModule.showBalance(0);
});
$("#img-balance").on("touchend",function(){
$(document).off("touchmove", function (event) {
event.preventDefault();
}, false);
});
以上代码能完成我想要的效果,在电脑上玩儿的好好的,结果放在手机上就跪了,原来可以上下滑动的页面,只要一滑动图片,页面就不能上下滑动了,再检查了一下代码,表示完全不清楚为什么要在touchstart和touchend里面绑touchmove事件,这可能也是拷别人代码的弊端吧,因为不知道原因,索性就把那两段代码给删了,结果页面莫名其妙的就满血复活了,以下是修改后的代码:
$("#img-balance").on("touchstart", function (e) {
var touches = e.touches[0];
oW = touches.clientX - $(this).offset().left;
});
$("#img-balance").on("touchmove",function(e){
var touches = e.touches[0],
oLeft = touches.clientX - oW;
if (oLeft < 2) {
oLeft = 2;
} else if (oLeft > document.documentElement.clientWidth - 35) {
oLeft = document.documentElement.clientWidth - 35;
}
$(this).css("left", oLeft + "px");
mainModule.showBalance(0);
});
因为删掉off代码之后touchend里面几乎没有东西了,索性就把touchend也删了,发现并不影响效果,就偷着乐了,后经查证发现,页面不能滑动,就是因为那个event.preventDefault()阻止了事件的默认行为(页面滑动???),所以,把它删掉就好了。
3、部分手机滑动不流畅
页面中的滑动刷新使用的是iscroll,郁闷的是我周边的所有人的手机滑起来都是顺畅的不要不要的,只有我的,完全划不动,卡得抓狂,鉴于只有我的手机有这个问题,所以我把它放在了项目的最后来解决,甚至抱着只有我一个覆盖率或许可以不修复这个问题的小侥幸,现在想想真是惭愧(主要是我旁边的大牛说,“你要知道有一个你,就有千千万万个你”,你赢了)。
在网上查的时候发现还真是有千千万万个我,发现很多人都遇到过这个问题,其中有我觉得可信度较高的知乎(https://www.zhihu.com/question/21938954)、CSDN(http://blog.csdn.net/bbsyi/article/details/50915049 ,http://blog.csdn.net/ml01010736/article/details/50999335)等,还有一些不知名网站,都给出评论说可行的解决方案,无外乎就是以下几种(多是知乎总结出来的):
1) iScroll v5.1.3 momentum: true (我用的iscroll的版本没这么高,所以就没有试过这种方法,不知是否可行)
2) 关闭probeType属性 (传说是因为这个启用监听滚动状态的很耗性能,关闭这个属性滑动就会流畅很多)
3)给scroll元素增加css样式:-webkit-transform:translate3d(0,0,0);
以上3种方式,我试过后两种,项目中的iscroll初始化为:
_myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
wrapper中的DOM为:
<div id="wrapper">
<div id="scroller">
<div id="scroller-pullDown">
<span id="down-icon" class="icon-double-angle-down pull-down-icon"></span>
<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
</div>
<div id="scroller-content">
<div class="div-list">
</div>
</div>
<div id="scroller-pullUp">
<span id="up-icon" class="icon-double-angle-up pull-up-icon"></span>
<span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
</div>
</div>
</div>
先是第三种,给scroll元素增加css样式,scroll元素是#scroller,上午做测试的时候用的是#scroller-content(啊啊啊啊啊!!!)现在才发现元素选错了,不知道是不是这个原因导致的第三种方法没有生效(存疑)。
第二种方法,注释掉实例化时的probeType属性,然而发现,并没有什么用。。。于是又开启了茫茫网络上的捞针行动。
最终,在CSDN(http://blog.csdn.net/ml01010736/article/details/50999335)上找到了可行办法:
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
偶,这中间还有个小插曲,为了解决这个滑动问题,一度傻逼得怀疑是不是没有写fastclick的原因,后来加上了并没有解决问题,也忘记了删掉,还导致后面的a标签需要点击多次才能跳转链接的问题,郁闷。。。
加上了这句代码之后,我的手机页面终于也是顺顺畅畅的了,哈~舒心~就喜欢遇到这种花时间就能解决的问题
以下是问题:
1、在解决touchstart、touchmove、touchend引发的问题的时候顺带解决了一个不知名bug,这个页面上有个输入框,每当输入框开始输入数据后页面就会白屏,只留下孤独的光标在那里闪烁,输入点击完成后页面又显示出来了,这个只是IOS上的问题,奇怪的是,还没有开始找原因,解决了页面卡死事件后这个问题也莫名其妙的不见了,简直灵异。。。
2、解决最后一个问题的时候因为傻逼加上了fastclick,又引发了我的头脑风暴,fastclick能够解决移动端的300ms延迟问题,那按理说我加上了之后点击应该比之前反应快一点才对,为什么反而需要多次点击才能跳转链接呢????
做这个总结的时候已经是项目发版本的晚上8点,加班狗已哭晕在厕所,这一次的项目我学到不少好东西,虽然连加了两周的班,毕竟无欲无求,也就无所谓了。
移动端H5页面遇到的问题总结的更多相关文章
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 解惑好文:移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动端H5页面开发,碰到一个字体变大的BUG
移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
随机推荐
- Transport layer and Network layer
http://stackoverflow.com/questions/13333794/networking-difference-between-transport-layer-and-networ ...
- swift之向ftp服务器传文件
在 mac 上如何使用 xcode, swift 语言开发一个向 ftp 服务器上传文件的工具? 使用的是第三方库 Rebekka,下载地址为:https://github.com/Constanti ...
- Freertos之系统配置
Freertos之系统配置 http://blog.csdn.net/liyuanbhu/article/details/7912170/
- iBATIS的多对多 数据库设计及实现
iBATIS的多对多映射配置方法和多对一映射配置方法差不多,不同的是,多对多映射,数据库设计上需要一个记录两个类关系的中间表,本文以学生-老师为例,在iBATIS的sqlmap中配置多对多关系. iB ...
- Unity3d之流光效果
所谓流光效果,如一个图片上一条刀光从左闪到右边,以下为实现代码: c#代码: using System; using UnityEngine; public class WalkLightEffect ...
- 控制流之continue
continue语句continue语句被用来告诉Python跳过当前循环块中的剩余语句,然后 继续 进行下一轮循环.使用continue语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- DNS远程和DNS日志
三.rndc远程控制服务器 1.在被管理的服务器上生成密钥 # cd /var/named/chroot/etc # rndc-confgen -a -b 128 -k mrndc-key -c mr ...
- Part of Speech Tagging
Natural Language Processing with Python Charpter 6.1 suffix_fdist处代码稍微改动. import nltk from nltk.corp ...
- 22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]
下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formScheme ...
- iOS开发——绘图电池按百分比显示
1.在DrawLine.h文件中提供了一个改变电池电量数值的接口 // // DrawLine.h // Demo-draw2 // // Created by yyt on 16/5/11. ...