移动端兼容性问题

1. overflow: auto; IOS手机滚动卡顿

-webkit-overflow-scrolling: touch; //有回弹效果 
复制代码

2. 动画定义3D启用硬件加速

3. 盒子边框最低只能是1px

4. a标签或者button标签等，点击后会有蓝色边框；去掉难看的点击的高亮效果

* {
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
复制代码

5. calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，因此移动端不建议使用calc
复制代码

6. 微信浏览器中跳转新网页：window.locaition.href 无效；

var nextPage = document.createElement("a");
     nextPage.setAttribute('href','http://www.baidu.com');
     nextPage.click();
复制代码

7. 移动端点击300ms延迟

8. 移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，因为自动播放网页中的音频或视频，会给用户带来一些困扰或者没必要要的流量消耗，因此苹果系统和安卓系统一般都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才能够播放。

9. 禁止ios和android用户选中文字；禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

div {
  -webkit-user-select:none；
  -webkit-touch-callout: none
}
复制代码

10. ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />
复制代码