开发中遇到的一些兼容性问题总结

1.首页meta标签

<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">

2.禁止复制选中文本

.sel {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

3.在IOS中，input 键盘事件keyup,keypress,keydown事件的支持性不是很友好，但是在安卓浏览器中，是非常友好的。
解决办法：可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

4.inout 中的placeholer属性会使得文本的位置偏上

input {
line-height:20px;  /*（和input框的高度一样高）---pc端解决方法*/
line-height：normal;  /*---移动端解决方法*/
}

5.PC端使用input=number时,会出现上下箭头

在谷歌以为内核为webkit的浏览器使用如下方式解决input=number*箭头问题*
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
但是这个方式并不适用于火狐浏览器，火狐的解决办法为：
input[type="number"] {
    -moz-appearance: textfield;
}  

6.移动端 HTML5 audio autoplay 失效问题
测试结果： iphone机型在wifi环境下可做到自动播放视频（部分iphone无法自动播放受限于网络环境，手机处于低电量模式）
在针对小米，华为，三星，魅族，国美等安卓机的测试中， 其中 魅族s6，三星盖乐世s8可以实现在微信中自动播放。

安卓手机无法自动播放原因分析：1，出于用户体验，节省流量的考虑，移动端禁止自动播放；2，视频文件太大，加载时间过长或错误；

安卓系统自动播放问题解决方案（以下解决方案均测试过都无法生效）
1.设置video属性autoplay；

2.通过js调用play();

3.通过js来触发click事件；

4.使用插件videojs；

5.通过js调用load()然后再调用play();

6.设置video属性webkit-playsinline=“true”；

7.touchstart监听；

8.stalled事件处理；

9.canplaythrogh事件处理；

10.readyState大于2的处理；

11.DOMContentLoaded监听；

12.微信js api中WeixinJSBridgeReady；

13.微信js api中getNetworkType；
总的来说，安卓和苹果系统需要通过用户的相关操作才能进行自动播放。
解决办法：通过绑定touchstart事件，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

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

7.在项目中碰到了一个问题，就是使用 video属性在部分android机播放之后浮在最上层，设置z-index无效。
其实这并个问题没有很好的解决办法。

当用户播放完视频以后，滚动条下滑到一定位置后，可以对这个audio元素进行影藏操作。

8.移动端中不需要长按保存图片的操作

利用css属性
img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}

9.在ios上时间格式处理NAN的解决办法。

sDate1 = sDate1.replace(/-/g,"/");
sDate1 = new Date(sDate1).getTime();
正常的时间格式是：2019-06-18
但是ios上不能处理这种格式的时间，所以需要将“-”替换成“/”  如：2019/06/18，才能对时间进行处理操作。

10.浏览器滚动条隐藏兼容
.contentP 为需要隐藏滚动条的元素

/*fireFox*/
.contentP {
  scrollbar-width: none;
}
/*IE10,IE11,IE12*/
.contentP{
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow: auto;
}
/* Chrome*/
.contentP::-webkit-scrollbar {
  display: none;
}