p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545; min-height: 14.0px }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { font: 12.0px Helvetica }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545; min-height: 14.0px }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { font: 12.0px Helvetica }
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微信内置webview对meta 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 这个属性,点击半天才执行事件