移动端项目经验 JavaScript

HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。

移动端click时间300ms延迟

在移动端,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。

对于这种体验不佳的问题,我们可以使用tap等事件来替代,而tap事件属于模拟类事件,需要引入zepto.js或者百度的touch.js等插件辅助实现。也可以通过使用fastclick.js来解决click的延迟(这个不是使用tap事件去替代)。

元素点击高亮样式的处理

在移动端,出于让用户了解是否点击成功,浏览器会在用户点击一个a标签或者Javascript定义的可点击元素时,出现一个半透明的灰色背景。发明的目的是为了更良好的用户体验,但是这种目的在当前反而成了累赘,大多数的产品都希望能够去掉这个背景。

解决办法很简单:-webkit-tap-highlight-color:rgba(255,255,255,0) 可以同时屏蔽 iOS和安卓点击元素时出现的阴影。-webkit表示的是浏览器内核前缀,表示能够应用于所有webkit内核的浏览器(苹果、谷歌等各种主流浏览器以及安卓系统自带的浏览器采用的均是此种内核,但是注意,IE不是),tap表示轻敲、轻触,highlight-color表示的是高亮颜色。rgba是一种全新的(CSS3新增)表示颜色的方式,最后一位表示透明度,将透明度设置为0,在视觉上自然就看不到了。关于浏览器内核以及浏览器内核前缀可以查看《浏览器内核及内核前缀》

zepto的touch问题

为了处理一些touch事件,我们常会引入zepto等插件进行处理,但是会发现,swipe事件在小米1等低端手机不支持。

解决办法有两种,与其说解决办法倒不如说是权宜之计,一种是干脆不兼容低端手机(当前也是现实的,只要这种手机在市场份额当中占比很少,其实是可以忽略的,就如同当前PC端的兼容,基本都是做到IE8或IE9以上,IE6\7的市场份额已经很小了)。另一种方法则是放弃zepto了~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

16.6K15
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(一)认识前端

前端对于网站来说,通常是指网页,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

763
来自专栏游戏杂谈

Chrome、FF在swf处理中的问题小记

当时的需求是点击网页装扮的时候会弹出一个层,层内有很多TAB选项卡,而有一个对图片处理的swf(让用户选择一张图片、编辑图片)放在其中一个选项卡中,而当来回切换...

933
来自专栏IMWeb前端团队

切图工具/插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 切图工具 切图插件 这里的插件都是ps的插件,比较小巧,易于安装和适...

2548
来自专栏微信小程序开发

小程序中布局突然乱掉了,到底是怎么个情况?

就在上周,突然很多用户反馈,都说小小签到布局乱掉了(线上有四款小程序都收到这样的反馈,这里我就不广告了),经过客服反复沟通,找到了布局乱掉的必现条件: 1、IO...

40116
来自专栏繁花云

巧用js替换某些不能替换的文字

在运行某些程序时,作者为了保护版权,将版权文字进行了特殊处理,使得我们无法进行修改。

820
来自专栏phodal

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

541
来自专栏零基础使用Django2.0.1打造在线教育网站

爬取腾讯新闻首页资讯标题

终于进入到我们的实战内容篇了,因为是第一篇,所以找一个简单的例子给大家介绍爬取的详细过程,这既是对基础篇知识的运用,也是增强大家往后学习的动力。

1612
来自专栏杨俊标的专栏

【HTML插件】帮你100%还原设计

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPh...

1892
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

1663

扫码关注云+社区