1. 点击元素触发事件的先后顺序:touchstart, touchend, mousedown, mouseup, click

2. Animate 的 stop 问题
问题:手机端由于用 CSS3 做动画,所以 zepto 没有 stop 方法。
解决:我已自定义扩展了一个方法,目前支持动画 2d transform 和top 和 left 的停止,不支持@keyframe 和 3D。

3. 声音问题
问题1:对于IOS 的手机,如果想在游戏的结尾出结果的声音;
解决:当用户点击游戏“开始按钮”,调用结果声音的play()然后pause();
不能用 zepto 的 tap去绑定执行 pause, 因为 tap方法里面用了 setTimeout延迟
问题2: 安卓手机有的时候声音会进入死循环播放。
解决:调用下声音的 .load()方法再.pause() 或者 .load()方法再.play()。

4. rem
问题:为了能像PC端一样随心所欲的切 640宽度下的页面
解决:先约定好:对于 640px 下的 html 根元素定义 font-size: 100px, 然后在页面的 head 加入以下代码, 那么当一个元素是 10px 时,你只要写成 0.1rem,方便快捷。

var fitPage = function(){
var w = $('html').width();
w = w > 640 ? 640: w;
var newW = w/640 * 100;
$('html').css({
fontSize: newW
});
}
fitPage();

5: 判断是否是手持设备
本来偶是写 'ontouchstart' in window, 参考了下 jQuery mobile,改成'ontouchend' in document

6: 在Android 手机上的 chrome 浏览器有个BUG, 给某个元素绑定 touchstart 属性,并且代码里写了 e.preventDefault(); 那么当你用手触碰这个元素 并且不放开的时候会一直触发touchmove 事件,正常应该是不会触发touchmove事件。所以还是得根据手在屏幕中移动的距离来判断 是否用户触发了touchmove事件,来知道用户是在滑动屏幕还是在点击一个元素。

$('.el').on('touchstart', function(e){
e.preventDefault();
})
.on('touchmove', function(){
console.log('trigger touchmove'); // it will always trigger it.
})

7: UC 浏览器下click事件优化过

正常点击一个元素, 先触发 touchend 后触发click, 但是当 touchend 里执行的代码放到 setTimeout 里面以后, click 里代码先执行了。

$('.m').on('touchend', function(){
setTimeout(function(){
console.log('touchend');
}, 0);
}); $('.m').click(function(){
console.log('click');
});

WAP端 经验记录1的更多相关文章

  1. WAP端 经验记录2

    1. LightboxV2 插件 点击A 应该关闭弹层的效果,但是 SAMSUNG 手机上原生浏览器上,看上去不会关闭却跳转了,但当点击回退按钮的时候就会看见弹层已经消失(其实之前的关闭效果已经记录了 ...

  2. mcake活动维护常见问题记录【wap端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

    ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ wap端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 一.wap端弹窗 .Dialogbg-Select{ background-co ...

  3. 也来谈谈wap端瀑布流布局

    Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...

  4. JS判断是wap端访问网站还是PC端访问,然后进行自动跳转的代码

    <script type="text/javascript"> function goPAGE() { if ((navigator.userAgent.match(/ ...

  5. WAP端 touch事件触发顺序记录

    IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touc ...

  6. SSRS开发的经验记录

    虽然工作经验相当的长,但是之前在SSRS上还没有象今天这样的经验.这只是工作经验的一点记录. 1. 定义DataSet 定义DataSet的时后,可以采用Text的方式.用Text的方式可以用一段比较 ...

  7. 关于emoji表情,支持在app端发送web端显示,web端发送给app端显示,web与wap端互相显示。

    要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...

  8. 弹性盒子之wap端布局

    发现移动端用弹性盒子布局起来更加的方便,box-flex:val;特别是图文展示的时候,如下面的 <!DOCTYPE html> <html> <head> < ...

  9. flex经验记录(转载)

    最近一直忙于项目,很好抽出时间学习,刚忙里偷闲浏览博客看到一位博友总结的一些flex的经验,感觉不错就转载过来,一来扩散一下,二来保存下来,以后忘记的时候可以回来学习下. 原博文地址:http://b ...

随机推荐

  1. 给破坏性的Rake任务加把锁 | Rails

    抄自这里 直接贴代码 # lib/tasks/skip_prod.rake desc 'Raises exception if used in production' task skip_prod: ...

  2. 线程优先级抢占实验【RT-Thread学习笔记 3】

    同时处于就绪状态的线程,优先级高的先执行. 高优先级就绪时,低优先级任务让出CPU,让高优先级任务先执行. 创建两个任务函数: //线程优先级抢占 void thread1_entry(void *p ...

  3. WM_MOUSELEAVE和WM_MOUSEHOVER使用

      默认情况下,窗口是不响应 WM_MOUSELEAVE 和 WM_MOUSEHOVER 消息的,所以要使用 _TrackMouseEvent 函数来激活这两个消息.调用这个函数后,当鼠标在指定窗口上 ...

  4. c# winform 窗体起始位置 设置

    窗体起始位置为顶部中间,WinForm居中显示: ; ; this.StartPosition = FormStartPosition.Manual; //窗体的位置由Location属性决定 thi ...

  5. C#动手实践:Kinect V2 开发(1):初步了解及环境搭建

    该分享使用的是Kinect 二代,C#做为编程语言,请知悉 Kinect是微软在2009年6月2日的E3游戏展上,正式公布的XBOX360体感周边外设.它是一种3D体感摄影机,同时它导入了即时动态捕捉 ...

  6. 在vue1.0遇到vuex和v-model的坑

    事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...

  7. 安装lua和openresty

    #### ubuntu 16.04 64bit 安装Lua luajit 及openresty 1 安装lua ,因为luajit 支持lua5.1较好.貌似不支持5.2和5.3作为学习,我就安装5. ...

  8. Dictionary的几种遍历方法

    Dictionary<string, int> list = new Dictionary<string, int>(); list.Add("d", 1) ...

  9. JS获取form表单所有属性值

    // 得到一个表单里的全部信息function getFormQueryString() { var frmID=document.forms[0]; var i,queryString=" ...

  10. Android开发-Android Studio使用问题解决

    回头一看,很久没来更新了,归其原因,还是懒癌发作,倒是生活作息规律了,几乎每天都在11点前休息.今天趁着培训,使用android studio,发现几个坑: 1.android studio每次都提示 ...