H5兼容性问题

记录H5页面各种兼容性问题汇总
1、h5页面点击事件ios没反应 移动端兼容性问题

$(document).on("click",".dom",function(){
console.log('ios端点击没有反应')　　
})

解决办法：给触发点击事件动态添加的dom增加样式,cursor:pointer 或者增加一个touch事件

2、ios input button背景色不起作用的
解决办法：

input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 
background改成background-color

3、关于ios端上传图片后旋转90°可以看我另外一篇 有详细介绍（iphone默认横屏拍照才是正确的方向,竖屏拍照会携带逆时针旋转90°的信息）

4、在flex容器中，当空间不够的时候，设置了固定宽高的图片被压缩，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink: 0;防止被压缩

5、H5点击事件时会有闪频效果
解决办法：html 或者body

 {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }

6、正则表达式匹配iframe标签

let title ='<iframe src="www.baodu.com"  width="500" height="300"></iframe>'
var re =  /<iframe[^>]+>/g;
re.test(title)   // true

7、隐藏滚动条

.div{
    overflow-x: scroll;
    word-break:keep-all;
    scrollbar-width: none;//兼容firebox
    -ms-overflow-style: none; //兼容ie
}
//兼容Chrome 和safari
.div::-webkit-scrollbar{
    width: 0;
    height: 0;
}