日期解析
下面格式的时间字符串iOS(包含iOS7)不支持解析,android一直支持
Date.parse("2010-03-15 10:30:00");//会返回NAN
简单的解决方案是
var arr = "2010-03-15 10:30:00".split(/[- :]/),
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
fixed定位
android:
2.2+开始支持fixed定位,但需要把页面缩放关闭
ios:
5.0+开始支持 页面缩放开启之后fixed不会失效,但页面缩放之后fixed失效
onscroll事件
ios:
在mobile safari下在页面滑动时js进程会停止,所以onscroll事件也是在页面停止滑动之后才会执行一次。
android
android下页面滑动不会阻止js进程,但可能是性能问题,事件执行周期不稳定,甚至有时候也会出现滑动停止才会执行一次onscroll的情况
多点触摸
gesture
android 3.0之前不支持
touch
android上存在bug
:::javascript
window.addEventListener(‘touchstart’,function(e){
console.log(e.touches.length)
},false);
touches数组始终只有一个值,所以用touch事件模拟gesture也是不可行的
demo中body元素添加了touch事件,图片添加了gesture事件
scroller
元素内部滚动(-webkit-scroll-touch)
目前只有ios5+支持(据说android4+支持,但测试后发现木有)
元素内部滚动,目前网上有不少解决方案,主要是通过scrollTop属性或者translate模拟实现,比如iscroll4等,但大都存在以下问题。
a. 在android上滑动效果较差,特别是内部元素dom结构相对复杂时,都会出现无法滑动或者滑动很卡的情况
b. 更新内部元素内容时会出现页面闪烁的情况,让人非常不爽
scrollIntoView
很多android浏览器不支持这个方法,拿了一个android4.0的原生浏览器做测试,发现支持的也不好,但window.scrollTo属性支持的都还不错,可以选择替代方案,先算出元素据页面顶部的距离y,再使用window.scrollTo(0,y)来实现
地理定位
在一些android浏览器上存在bug,主要分为两种情况
-
浏览器直接无法定位(错误事件中e.code为2),但本地应用的定位功能正常
-
一直显示定位中(传入的success和fail事件都不会执行)。所以定位时设置超时属性是很有必要的
伪类
1.hover和active伪类都存在bug
2.设置了点击事件的元素在点击时会有一个阴影效果(-webkit-tap-highlight-color),这种点击效果在很多android机器上没有,但android上的a元素点击有点击效果
屏幕旋转
orientationchange从android2.2开始支持,但事件会在旋转屏幕之前触发,需要通过setTimeout去修复。
圆角边框出现虚框
通过border-radius=width/2原理实现圆形容器时,在android下圆形边框会出现齿形虚框
本地存储
在混合App中(基于webview),若使用localStorage或者webSQL存储数据,数据是永久存在的(当更新程序或者程序被强制关闭时重新打开程序数据都会存在),但从ios5.1开始这个数据不再是永久的,它会被当作临时数据,ios随时可以删除,而且不会出任何警告,所以ios5.1之后在HyBrid App中本地存储功能只能通过phoneGap这些壳去调用原生的存储接口实现。目前这个bug已在ios6中解决
浮层
在android上最好不要出现浮层,目前已发现以下bug
-
链接点击位置不正常(点击效果会出现在浮层下方元素上)
-
浮层内容较多时可能需要实现元素内部滚动,so……
touchend
这是一个非常恶心的bug,在一些andorid的机型中,发现很多时候轻微滑动时不触发touchend事件
background-size
在android2.1上要加-webkit-前缀,但是2.2之后去掉-webkit-前缀才识别,所以要在两个系统都支持的话需要把两种都写上
background:url(...) center center no-repeat;
backround-size:100% 100%;
-webkit-backround-size:100% 100%;
background-size有两个比较有用的值:contain cover
这两个属性的作用是保持背景图片比例不变,放大或缩小背景图片 cover是保证铺满全屏幕,多余的宽或者高被隐藏 contain是保证容器包含整个背景,比例较小的宽或者高会留白
.bc{
width:320px;
height:240px;
background:#000 url(http://imgsrc.baidu.com/baike/pic/item/a044ad345982b2b72550766c31adcbef77099b4f.jpg) center center no-repeat;
background-size:cover;
/*-webkit-background-size:contain;*/
}
经测试,这两个属性值在android2.2+支持
ios 4.3.5上contain实现无bug,cover底部会出现留白 ios5+无bug
页面闪动
高端版开发过程中有时候会出现页面闪烁的情况,归纳有以下几种可能
a.android下使用了translate而不是translate3d
b.url中多了#号(比如很多人链接当按钮使用时href喜欢写成#号,要杜绝这一点,全部写成'javascript:;')。加个题外话,高端版中不要使用hash进行锚点定位,使用window.scrollTo(0,y)或者el.scrollTntoView()替代.
c.经常在旋屏的时候出现,这个一般是控件逻辑问题,比如导航栏控件,很多写法是在orientationchange事件里面重新算宽度,而屏幕旋转过程中样式也有一个默认变化,当两者冲突时,会产生闪烁现象。
hashchange
android 2.2+才支持
JavaScript 中json属性名不能为class
在IOS4.X系列中,当json属性名为class的时候会出现奇怪的语法错误,如:
:::javascript
{
class:'button'
}
input maxlength
android 2.1中input 元素不能加入maxlength 否则会出现无法输入的情况,但textarea无此问题
Anroid 4.0.3系统发现,直接使用css(display,block),设置dom节点显示状态有时失效。但执行了getComputedStyle函数后,则不会出现此bug。推荐:直接使用kimi的show,hide方法
其它
-
iTouch4 iOS5.1 app的webview中,若在a元素的点击事件中修改其display属性,会导致webview crash
-
小米3系统原生浏览器:浮层中使用kimi的tap事件时会产生穿透,click则不会。小米3中的chrome浏览器tap也不会穿透
-
部分原生android浏览器执行 JSON.parse(null )时会报js错误
-
部分Android上面浏览器动态插入link元素时不触发load事件,这样导致一些require实现lib(如seajs)无法正常工作,目前发现机型:ZTE U930 原生浏览器