1.ie9 不支持rgba支持rgb

2.安卓不支持 audio和video的自动播放,需要调用play()方法,且只支持click方法

3android4.4以下版本,设置圆角属性需要在直接元素上,向父元素设置圆角并且指定overflow:hidden是不会生效的。

4、红米手机,ua返回iphone,需要结合platform判断,但是还不准确,导致需要ios和android区别对待的时候就坑了。

5、fixed的问题。这个解决办法是尽量不要用,不过ios7及以下才会出现这个问题。某些情况下红米也会有这个问题。

6、如果你想要使用css3的动画,那么一定要变着方式使用3d gpu加速的方式,不要试着left,height,width这样的元素进行变换了,android4.4以下版本卡死你。

7、移动端click点击会有300毫秒延迟,使用fastclick,tap解决。这个插件最良心了。

8、1px问题

9、qq浏览,uc浏览以及ios的浏览器,滚动时不会触发scroll事件,但会触发touchmove。当停止滚动后会出发scroll。

10、-webkit-tap-highlight-color可以取消点击高亮。

11、localStorage在浏览器开启无痕模式下ios会抛异常,导致js中断。

12、一些情况下对非可点击元素监听click事件,ios下不会触发,css增加cursor:pointer就搞定了。当然想要干脆静止点击就是not-allowed。

13.(iPhone5以上各种应用的webview(例如微信)在遇到有大量图片的页面时会出现图片乱套的情况,6和6plus更为严重,具体表现为各种img和background-image互相错乱,目前研究出暂时的解决方法是动态给所有用到图片的元素加上

-webkit-transform : translate3d(0,0,0)

进行强制重绘,测试结果对于绝大部分出现问题的机子有效,但仍然有小部分机器还是会出问题,另一种方法是进行懒加载,但是这会降低开发效率,并且对使用background-image的元素比较难实现

 

*修正:

 

关于iPhone图片乱串的问题,后来使用OS X的Safari调试后发现并不是渲染问题,而是请求回来的图片本身就算错的,最后通过修改从多个CDN地址取图或者把图分散到不同目录下后问题解决,多次测试后也再没有出现问题。

 

现在具体的原理还不知道,因为只有iOS会出现问题所以我们怀疑部分CDN的配置与iOS的请求机制不兼容,暂时可以归位玄学问题XD)

14.safari(包括OS X、iOS和Windows版)对transform-origin的Z轴判定和其它所有浏览器都不同,设置transform-origin的Z轴会直接产生translateZ的变换,十分不理解,暂无纯css解法

15.Android调用重力传感器返回的数据和iOS和Windows Phone上的是相反的……

16.Android微信内置webviewmeta viewport的支持有缺陷,当user-scalable=no时,设定width为固定数值(例如640)不会自动缩放,需要用js做一些处理

(新版微信已经修正了这个问题)

17.Android的各种浏览器都不支持同时播放多个音频,并且通过js连续播放几个音频的时候会出现一些问题。

18. iOS 弹出键盘时,viewport 高度并不会变,但是 Android 是变的。所以 iOS 上 fixed 在底部的元素显示不出来。

19.、做点击跳转,长按删除功能的时候坑比较多:

(1)组合使用touchstart,touchmove,touchend,click事件;

(2)部分机型按到文字会弹出选择,复制的选项,使用 onselectstart="return false;" 禁掉;

-- 之后才知道有很多移动端事件处理库可以用,如 hammer.js

20、translate3d会引起兄弟元素的z-index层级无效;原因是t3d实际是有z轴层的变换,解决办法自己处理的是在兄弟元素上也加上t3d。

21.在andriod上的uc浏览器里video标签默认的z-index是最大max的 ,谁也遮盖不住它

22.IOS微信(version 6.5以上)的video不支持autoplay了,需要触发播放事件(load()也不好使);iOS 不支持loadedmetadata事件;安卓不支持duration update等事件;

22.注册事件的元素尽量可别用-webkit-filter 这个属性,点击半天才执行事件

23.getElementsByClassName 这个方法在ie 和 chrome里是直接取,不会缓存,即使你已经把它赋给一个变量。在safari里面是讲结果缓存起来了。

24.安卓2.3不支持box-sizing