android 兼容模式 如何解决android兼容问题

我们在做移动端开发时经常会遇到各种兼容性问题，所以总结了一些我曾遇到过的一些问题，也欢迎大家补充，修正。

1. 用position:absolute/fixed;把一个按钮固定在页面的底部，在android系统中，当调用输入法时，该按钮会被顶起
   解决办法：
   使用媒体查询@media screen and (max-width:400px){}当页面高度小于某一个值时，给元素一个top值
2. 不同浏览器默认margin，padding不同。
   解决办法：
   *{margin:0;padding:0;}
3. 不同浏览器的最小字体不同，有的是10px，有的是12px或者16px
   解决办法：
   设置字体时，尽量不要小于12px,如果一定要小于12px，可以使用transform:sacle()进行缩放
4. 透明度opacity
   解决办法：
   IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)
5. 使用url传参时，特殊字符无法识别？如"#"
   解决办法:
   传参时,使用encodeURIComponent(url)转义，解析url用
   decodeURIComponent(url)
6. click事件延迟的问题
   移动端的点击事件都会有300ms延迟,是因为浏览器在等待你是否执行双击,但此延迟导致用户体验不好
   解决办法:

• 用script标签引入fastclick库去除延迟
• 禁止缩放 user-scable=‘no’

7. 浮动子元素撑开父元素盒子高度
   解决办法:
   1.父元素设置为 overflow: hidden;
   2.父元素设置为 display: inline-block;
8. input的placeholder文本位置偏上的情况
   解决办法:
   PC端设置line-height等于height能够对齐,
   而移动端仍然是偏上,解决方案时是设置css line-height:normal;
9. input的type为file时，按钮样式处理
   问题描述:
   在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。
   解决办法:
   通过设置opacity为0来进行模拟，背景图设置在其他标签里面。换句话说样式用普通标签模拟，功能用input来实现。
10. 上下拉动滚动条时卡顿、慢
    解决办法:

body {
-webkit-overflow-scrolling:touch; 
overflow-scrolling: touch;
}

11. 移动端 HTML5 audio autoplay 失效问题
    问题描述:
    由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
    解决办法:
    先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

解决代码：

document.addEventListener('touchstart',function() {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});