1、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉
this
.value =
this
.value.replace(/\u2006/g,
''
);
2、移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：
document.addEventListener(
'touchstart'
,
function
() {
document.getElementsByTagName(
'audio'
)[0].play();
document.getElementsByTagName(
'audio'
)[0].pause();
});
————————————————
3、移动端 HTML5 input date 不支持 placeholder 问题
这个我感觉没有什么好的解决方案，用如下方法
复制代码 代码如下:
<input placeholder="Date" class="textbox-n" type="text" οnfοcus="(this.type='date')" id="date">
有的浏览器可能要点击两遍！
4、部分机型存在type为search的input，自带close按钮样式修改方法
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为
#Search::-webkit-search-cancel-button{
display: none;
}
如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。
5、唤起select的option展开
zepto方式:
$(sltElement).trrgger(
"mousedown"
);
原生js方式:
function
showDropdown(sltElement) {
var
event;
event = document.createEvent(
'MouseEvents'
);
event.initMouseEvent(
'mousedown'
,
true
,
true
, window);
sltElement.dispatchEvent(event);
};
6、 border-radius overflow:hidden 子元素隐藏不了
父级元素加上
-webkit-transform-style:preserve-3d; 或者 -webkit-transform: rotate(0deg);能够解决苹果手机的问题，但是安卓手机子元素还是隐藏不了
7、 微信长按二维码识别不了（微信保存图片同理）
解决办法：.qrcode{padding-top: 200px !important;margin-top: -200px !important;position: relative;z-index: 100;-webkit-user-select: none;} 对二维码图片添加qrcode样式
问题描述：
微信标题栏+系统状态栏的高度（64px）），如果网站采用了 viewport（640） 缩放，那么可识别区域偏上的高度差不多200
2.微信长按二维码可以能导致手机内存泄露，手机变卡，css3动画出不来（解决办法：退出微信进程，过2分钟之后进入微信）
8、 animation动画失效
问题原因：
1. 添加动画的元素必须为块级元素，行内元素需要转车块级元素或者添加绝对定位，伪类(:before :after)不能添加动画
2.动画的每个阶段的属性（-webkit-transform）要保持一致
如下这种正确
@-webkit-keyframes push{
0%{-webkit-transform:scale(0) translate(0,0);opacity:0;}
20%{-webkit-transform:scale(1) translate(0,0);opacity:1;}
100%{-webkit-transform:scale(0) translate(0,-100px);opacity:0;}
}
如下这种错误
@-webkit-keyframes push{
0%{-webkit-transform:scale(0) translate(0,0);opacity:0;}
20%{-webkit-transform:scale(1) translate(0,0);opacity:1;}
100%{-webkit-transform: translate(0,-100px);opacity:0;} /*缺少scale(0)*/
}
9、 微信浏览器音乐播放失败
问题描述：
如果页面上面有背景音乐和特效音乐，背景音乐准备播放之前（ canplay 没触发之前）同时加载特效音乐会导致背景音乐不能正常的播放
(背景音乐和特效音乐一起加载会导致背景音乐播放不了)
解决办法：
等待背景音乐 canplay 或者 canplaythrough 之后在加载特效音乐
10、 animation动画在安卓卡顿
问题原因：
js添加class给元素添加animation动画在安卓上动画会出现卡顿和延迟
解决办法
1.事先在css里面为元素添加好animation动画，隐藏元素，然后用js控制元素显示
2.js添加class给元素添加 transition 动画
11、 animation-fill-mode:both在安卓会导致页面默认滚动条闪烁
问题原因
.pagebox{
-webkit-animation: fadeIn 0.5s ease 0s both;z-index:2;} 在安卓下.pagebox 子集元素默认滚动条会导致.pagebox闪烁
（animation-fill-mode:both和z-index同时存在才会有这个问题）
解决办法
.pagebox{-webkit-animation: fadeIn 0.5s ease 0s;z-index:2;}去掉both
