记录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;
}
