关于移动端部分常见兼容性问题及解决办法
我们在做移动端开发时经常会遇到各种兼容性问题，所以总结了⼀些我曾遇到过的⼀些问题，也欢迎⼤家补充，修正。
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⽂本位置偏上的情况
解决办法:document有安卓版吗
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() {
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。