WAP端 经验记录1

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.
})
时间: 2024-10-19 23:39:58

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

WAP端 经验记录2

1. LightboxV2 插件 点击A 应该关闭弹层的效果,但是 SAMSUNG 手机上原生浏览器上,看上去不会关闭却跳转了,但当点击回退按钮的时候就会看见弹层已经消失(其实之前的关闭效果已经记录了)UC浏览器上点击A 能看到 弹层关闭,因为它的click事件 只比 touchend事件慢了一点点 IOS7.0 能看到弹层关闭再跳转,IOS8.0看不到弹层关闭再跳转,但是当回退的时候都是关闭的 2. chrome 中文版下 不能设置字体小于 12px, 但是可以用如下的属性去让它缩放-webk

【经验记录】Android上传文件到服务器

Android中实现上传文件,其实是很简单的,和在java里面是一样的,基本上都是熟悉操作输出流和输入流!还有一个特别重要的就是需要配置content-type的一些参数!如果这些都弄好了,上传就很简单了,下面是我写的一个上传的工具类: package com.spring.sky.image.upload.network; import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream;

wap端访问路径和销售归隐

与app访问路径和销售归因相比,wap端的特殊之处在于: 1. wap端可以浏览器多开,这就意味着在同一时间,用户的访问路径不止一条,可能是多条,相互并行. 因此就不能按app访问路径那样按时间顺序向后追溯路径,而是要根据refer url按时间向前逆推,推出整条路径. 2. wap端浏览器可以发送refer url,但当用户点击浏览器上的返回时,浏览器是发新的PV数据,还是不发,还是发老的PV数据,这就完全是由浏览器特性决定. 如此一来,底层数据中就会比较混乱,当做成路径表以后,表中可能会存在

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

<script type="text/javascript"> function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { windo

新浪微博爬取笔记(3):wap端爬取用户微博列表 ,转发列表+数据清理

wap端登陆成功后,就可以安心开始爬取数据了.我这次需要的数据是: (1)用户的近期1000条微博,需要:微博id,转发量,发布时间 (2)某条微博的转发列表,需要:转发人,转发时间 (3)某个用户的关注数,粉丝数,微博数,最近100条微博的平均转发量 ========================================= 相比模拟登陆,爬数据的工作就简单很多.但需要注意几个坑,一边做一边总结如下: ##爬微博列表## (1)虽然目前wap端每页加载的微博数貌似是固定的,但其实是不固

2014.07总结会经验记录

PPT方面的 1 完成工作情况汇总页,按时间描述项目,X轴是时间,Y轴是项目 2 具体项目页,工作内容可以按类型划分,人员无需在单个项目中指认出来.有一个汇总页进行描述即可. 3 人员配置页,可以去按照项目去划分人员,描述职责.(可借鉴zx的方式,用三角,圆圈,实心圆来区分人员使用方式,专职,复用,临时,我现在用的数字的统计方式更直观,单人用符号来标识更好) 4 技能覆盖页面没太大意义,要保留的话还是要强调变化,而且和人员配置页重了. 5 力求精炼,发现效果还不如第一版,内容必须精炼,过度展开后

WAP端 touch事件触发顺序记录

IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touchend scroll(一个)IOS8.4 safari 滚动滚动条的时候 touchstart touchmove(多个) scroll(0个或者多个) touchend scroll(0个或者多个) IOS7.0 和 IOS8.4 UC 浏览器 10.6.5.627 滚动滚动条的时候 正常滚动的

暑期开发过程中的一些经验记录

Jeremy Lin 一.GDI+设置 这个不算是什么经验,在学校里面主要应用Opencv,基本没用过GDI+,到公司后才发现需要用到它.这里记录一下GDI+的配置过程,好让以后参考. (1)在项目属性-->链接器--附加依赖项   添加  gdiplus.lib (2)在stdfx.h中添加 #include "gdiplus.h" using namespace Gdiplus; (3)为XXXApp类添加两个成员变量 GdiplusStartupInput m_Gdista

项目 经验记录(续)

此文是之前项目经验的续篇.上篇讲了开发抽奖API遇到的难点及其解决方案,这篇将讲述上线后发生的事情. 抽奖项目上线之后,反响不错,领导还表扬了.但是有一天上午,有个事业部打来电话,说刚刚开始上线的活动,抽奖提示奖品已抽完,叫我们查一下. 活动是百分百中奖的,只有所有奖品库存没有了,才会提示奖品已经抽完.我到redis里面一查,的确奖品没有了.奖品库存存进去的也没错,那是什么原因呢? (2w 多的奖品在不到两分钟被刷完,我的api处理高并发还是达到要求了) 我们接下来去看此次活动的中奖纪录,发现奖