做webApp遇到的一些坑及解决方案

1.问题:手机端click事件会有大约300ms的延迟

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

解决方法:使用touch事件来代替click事件,如zepto.js的tap事件和fastClick来解决。

2.问题:在部分机型下(如小米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值。

3.问题:使用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事件的库

4.问题: ios自动识别数字为手机号码,导致部分设置好的样式无效(字体颜色等)

原因: ios自动识别数字后会给数字加上 <a href="tel:数字">数字</a> 标签,所以数字的部分样式继承了a标签的样式,导致部分样式无效

解决方法:(1)meta 标签加上 <meta name="format-detection" content="telephone=no" /> 阻止默认识别数字为电话;(2)设置样式的时候 css 选择器把a标签选上,如:

<span class="number">123<span>
// 原来样式
.number {
color: #f00;
}
// 修改后样式
.number, .number a {
color: #f00;
}
时间: 2024-10-13 23:58:31

做webApp遇到的一些坑及解决方案的相关文章

做webapp 使用JS来检测游览器是什么类型,或android是什么版本号

此文转自我的www.gbtags.com社区的文章. 做webapp还是微信游戏,特别是canvas,android上不同机器不同版本区别还是很大的.其实,我今天写了这个js,主要是来做js判断游览器类型,特别使用在android的和widnows phone上的 var brower = { versions:function(){ var u = window.navigator.userAgent; var num ; if(u.indexOf('Trident') > -1){ //IE

安装CentOS 7.4 可能会出现的坑以及解决方案

安装CentOS 7.4 可能会出现的坑以及解决方案 (解决方法不唯一,如果行不通的话emmmm~~, 百度会啥你会啥~~) 坑.0X01 解决: 退出虚拟机,以管理员权限运行 坑.0X02 解决: 物理机的CPU不支持虚拟64位虚拟化,有些CPU是直接不支持,有些可以虚拟64位CPU,只需要在bios里面开启虚拟化功能即可. 坑.0X03 解决:  找不到光盘,重新选择正确的镜像光盘 坑.0X04  设置linux系统网卡时无法连接网络??? 解决1: 可能是物理机(windows)里相关服务

移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~

前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考.   此文中涉及的问题是本人开发中遇到的,解决方案是本人思考和查询资料的结果,纯属于个人的见解,一个需求,纵有千百种实现方式,所以如有歧义,请温柔吐槽! 此文会持续更新,前期内容会比较杂乱,待Q&A积累到一定量后,会进行整理. css3 1.Q:css3动画在Ios运行正常,在Android无法运行.因‘-webkit-’前缀未正确书写导致  A:-webk

webpack渐入佳境系列一:webpack环境配置与打包基础【附带各种 &quot;坑&quot; 与解决方案!持续更新中...】

首先介绍传统模块化开发的主流方案: 1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用.用时才定义,就近加载.最近在浏览seajs官方文档时发现seajs的域名已经在转卖,惊恐万分之余又想起了那句话,国内团队开发的技术,不是十全九美的最好不要用.国内高强度的生活节奏与压力使得日常维护变得很吃力.(想到这里,不禁为vue捏了一把汗,不过还好vue的前景非常光明!). 2.基于AMD的require.js,之前在用.提前声明与定义.国外团队维护. 3.基于commonJS的we

Maven3.2创建webapp项目过程中问题以及解决方案

用maven组件来创建web项目,maven的好处一大堆,但是在创建项目的时候问题也很多,诸多不顺,网上找了很多资料,貌似都没能解决问题. 环境:jdk1.7.0_80,eclipse4.4,maven3.2.1 注意:测试了jdk1.8.0_65,按照同样的步骤,貌似不能解决问题,如果你们有解决方案,可以告诉我,谢谢. 问题1.The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build

支付宝遇到的坑和解决方案

这两天在搞支付宝相关的支付,在此也是深受各种坑的折磨首先在集成支付 宝SDK时就各种的错误,同时也感受到了支付宝开放平台对这一块的官方文档做的也有所欠妥,为什么说欠妥呢,是因为他让我们这些开发者找里面的一些相关东 西,不怎么好找,而且一些紧要的对于我们来说特别重要的东西,找起来很费劲,特别是对于新手而言,可能都找不到在那块下载相应地SDK.但总的来说官方文 档里面的内容还是挺赞的,只是希望他们能够改善不足的地方,这样就完美无缺了.随后在该文章中加上如何使用支付宝. 首先我先说一下他的这个SDK从

Entity Framework中使用DbCompiledModel中遇到的坑和解决方案

前段时间,在公司做项目时,引入Entity Framework Code First的方法. 我们公司的软件为SaaS结构,有N个企业注册,其中SQL Server中有一张表为t_User_企业注册号,比如第1000个来注册的企业,为它生成t_User_1000这张数据表. 这种方式下,如何生成User对象跟数据表的对应关系呢?直接在OnModelCreating里面直接ToTable来绑定? 如果稍懂点Entity Framework的实现细节,这种方式实现有一个很大的问题,就是OnModel

我用select做多路复用踩到的坑

既然说是用select踩到的坑,那么就先直接贴一段使用select的代码上来瞅一下: bool SocketAction(int fd, const char* buf, size_t len, uint64_t milli_expire) { struct timeval tv; tv.tv_sec = milli_expire / 1000; tv.tv_usec = (milli_expire % 1000) * 1000; fd_set rd_set, wt_set; FD_ZERO(&

cmd合并打包、存在的坑、解决方案及注意事项

我想要的打包目标是:将模块合并,同时实现只需要简单修改的配置就能在发布版和调试版之间切换. 我的CMD模块文件 src/modules/module-1.js src/modules/module-2.js //src/modules/module-all.js src/modules/startup.js 我想要的目标文件是 dist/modules/module-all.js dist/modules/startup.js 首页文件 index.html <script type="t