web app遇到的一些坑及小技能

问题:手机端 click 事件会有大约 300ms 的延迟
原因:手机端事件 touchstart --> touchmove --> touchend or touchcancel --> click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟

解决方法:使用touch事件来代替click事件,如 zepto.js 的tap事件和fastClick,还有我自己也写了个移动端手势操作库 mTouch,都有相应的事件可以代替click事件解决这个问题

web app遇到的一些坑及小技能

问题:在部分机型下(如小米4、小米2s、中兴) body 设置的 font-size 是用 rem 单位的话,若其他元素没有设置font-size,该font-size值继承于body,则会很高概率出现字体异常变大的情况
原因:估计是跟app的webview默认设置有关,body的font-size使用rem单位,就是相对于 当前根节点的font-size来确定的,可能在某些webview的设置下,body用的是webview设置的默认字体大小,因为在我给html设置 了一个px单位的默认font-size时,还是会出现字体异常变大的情况,具体webview的一些细节就没有再研究了
解决方法:body设置一个px单位的默认font-size值,不用rem,或者给字体会异常变大的元素设定一个px单位的font-size值
问题:使用zepto的 tap 事件时会出现“点透”bug,比如:一个元素A绑定了tap事件,紧跟其后的元素B绑定了click事件,A触发tap事件时将自己remove掉,B就会自动“掉”到A的位置,接下来就是不正常的情况,因为这个时候B的click事件也触发了
原因:因为tap事件是通过 touchstart 、touchmove 、 touchend 这三个事件来模拟实现的,在手机端事件机制中,触发touch事件后会紧接着触发touch事件坐标元素的click事件,因为B元素在300ms内刚好 “掉”回来A的位置,所以就触发了B的click事件,还有zepto的tap事件都是代理到body的,所以想通过 e.preventDefault()阻止默认行为也是不可行的
解决方法:(1)A元素换成click事件;(2)使用我写的库 mTouch 来给A绑定tap事件,然后在事件回调中通过e.preventDefault()来阻止默认行为,或者换用其他的支持tap事件的库
            待续...
    一些有用技能点
            通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色
            设置css属性 -webkit-user-select:none; 控制用户不可选择文字
            区域性 overflow: scroll | auto 滚动时使用原生效果:-webkit-overflow-scrolling: touch (ios8+,Android4.0+)
上一篇: 猪价暴涨非最大难题,区块链赋能巧破行业隐患
下一篇: APP占内存是什么原因呢

针对APP开发您可能感兴趣

成都app开发公司有哪些

  • 成都APP开发公司介绍家庭食谱APP有哪些功能价值

    成都APP开发公司介绍家庭食谱APP有哪些功能价值?如今各地都有特色菜,那么想尝试特色菜却又不知道在哪里找,每天不知道吃什么,就很让人犯了难,那么成都APP开发公司考虑到大众的想......

  • 成都APP开发公司开发APP的误区有哪些

    成都APP开发公司开发APP的误区有哪些?APP看起来简单,但要完成一个app开发项目,实则需要很多步骤很复杂,有些成都APP开发公司在开发APP时,很容易陷入误区。1.价钱越低越好,许多成都AP......

  • 成都APP开发公司开发app需要哪些职位人员

    成都APP开发公司开发app需要哪些职位人员?关于app的开发,一定需要团队的力量,那么成都APP开发公司在开发自己的APP时,需要的专业app开发团队必须要哪些人员呢。1.产品经理。产品经理......

  • 成都APP开发公司开发电影购票app需要哪些功能

    成都APP开发公司开发电影购票app需要哪些功能?近年来,电影业发展迅速,喜欢看电影的朋友都会关注新电影的上映,成都app开发公司未来久科技开发电影购票APP不仅能观看电影,还能购买......

  • 成都消防APP开发公司包含哪些功能

    成都消防APP开发公司包含哪些功能?火灾事故的风险在日常生活中无处不在,我们不仅需要知道应对火灾的知识,还要熟知其对策,那么对于不了解这方面知识的人,未来久科技成都app制作......

  • 成都APP开发公司开发汽车APP的功能有哪些

    成都APP开发公司开发汽车APP的功能有哪些?如今越来越多的人有自己的汽车,那么传统的汽车行业可能不能满足大众的需求了,成都app开发公司未来久科技开发的汽车APP能够整合数据和信息......

  • 成都按摩椅APP开发公司功能模块有哪些

    成都按摩椅APP开发公司功能模块有哪些?伴随着共享业的兴起,许多共享产品应运而生,为整合线下按摩椅资源,缓解生活压力,为使用者提供了良好的休息环境,成都app开发公司未来久科......

  • 成都洗车app开发公司常见功能需求有哪些

    成都洗车app开发公司常见功能需求有哪些?伴随着汽车数量的逐步增加,许多相关产业得到了发展。清洗汽车是很普遍的,但是洗车排队也是常事。成都app开发公司未来久科技开发洗车APP为......

  • 成都乐器app开发公司功能需求有哪些

    成都乐器app开发公司功能需求有哪些?很多时候我们都会想要玩一玩乐器,但是又没必要专门去报班或者买些乐器,在这种情况下,未来久科技成都app制作公司开发成都乐器app,让每一个人......

  • 成都手机app开发公司怎么样

  • 成都未来久开发手机app是怎么收费

    成都未来久开发手机app是怎么收费? 如今手机APP软件应用已经成功渗透到我们生活中,而需要开发手机APP的企业都会非常关注这个问题:在成都企业开发一个手机APP到底需要多少钱呢?下......

  • 未来手机APP软件开发的方向是怎么样的

    随着数量增加,对手机APP软件开发者来说,做到差异化越来越难。比如在照片分享、购物、移动聊天、本地活动、电影、新闻等手机APP软件类别中,无论手机APP软件开发者选择何种领域,都......

  • 怎么选择一个手机APP开发公司

    开发手机APP是传统公司进行品牌宣传,拓宽销售渠道低成本获取用户的重要工具。但是现在APP开发市场鱼龙混杂,选错开发公司不仅会给企业造成金钱和时间的损失,还会影响企业的发展进......

  • 安卓手机app开发价格怎么计算

    网站客服反馈,很多企业对“安卓手机app开发价格怎么计算?”这个问题尤为关注。尤其是一些没有找外包公司开发过APP的客户,很多一上来直接就问价格。要知道一个开发一个app所需要的人......

  • 创新创业查看全部

    公司动态查看全部

    立刻咨询
    获取方案/报价

    1对1专家顾问

    7x24咨询热线
    180-1134-3090

    添加客服微信
    马上获取方案/报价