2016年7月及以前
tap 穿透问题
问题描述
上层元素绑定 tap 事件,下层绑定 click 事件(或者是 a 链接). 点击上层元素时, 会发生穿透, 同时触发tap 和 click事件.
解决办法
事件绑定都用 tap 或者都用 click 事件即可避免
图片下边距
问题描述
图片宽高 100% 即全屏时仍会出现下方有空白, 即有下边距
解决办法
img 标签默认边距导致的. 图片样式设置 float: left 或者清除默认边距margin: 0.
视频音频无法自动播放
问题描述
在某些移动端浏览器环境中, audio 或 video 设置 autoplay 属性无效, js 控制播放也无效.是由于不同浏览器的默认设置问题,不属于 bug.出于费流量等会导致用户困扰的原因, 一些webview下不允许自动播放或者js控制播放. 必须由用户行为触发播放.
解决办法
因此, 可以给 document 绑定 ontouchstart 事件播放. 或者查询相关接口, 比如微信 webview 可以在调用 jssdk的 ready 方法回调中执行自动播放
flex 兼容性问题
问题描述
flex 属于较新的 css3 语法, 某些 webview 中不生效
解决办法
使用 box-flex 代替或者不使用
touchend 移出仍然触发
问题描述
某元素上绑定 touchend 事件, 只要是从此元素 touchstart 即使移出该元素范围仍然触发该元素 touchend 事件.
解决办法
使用 tap 代替 click 而不是 touchend
行内元素之间有空格
问题描述
行内元素之间即使设置了外边距为 0, 依然有空格的间隔. 是由于写 dom 元素的时候行内元素换行所致
解决办法
代码编写或格式化时, 行内元素不换行
animation css3 动画不生效
问题描述
设置了 animation 动画, chrome 模拟调试能正常运行. 手机端不生效.
解决办法
添加 -webkit- 厂商前缀, 要注意的是, animation 属性要分开写, 不写简写, 简写一些浏览器即使添加 -webkit- 也不生效
苹果 transform rotate 3d 风车转动问题
问题描述
使用 transform rotate 3d 做风车转动效果时, 风车转到一半又转回来. 安卓正常转360度
解决办法
平面转动 使用 rotate 2d 安卓苹果都能正常
微信文章阅读原文链接打不开
问题描述
微信文章阅读原文链接打不开, 因为参数被加上了#开头的参数显示来源
解决办法
用代码去除带 # 的参数