开发过程遇到的一些兼容性问题，很多都已经忘记了，把还记得的记录下。不断更新！！！
-
移动端视频播放的坑
IOS: 自动播放、全屏播放
Android: 默认样式、伪全屏 -
iOS 上 animation-play-state 失效.
解决方法： 状态叠加
HTML
<div class="wp">
<img src="https://sfault-avatar.b0.upaiyun.com/408/449/4084493968-55c2142e12b21_huge256">
</div>
<p class="desc">点击图片播放/暂停</p>
CSS
.wp, .wp > img {width: 100px;height: 100px; border-radius: 100%;}
.wp { margin: 0 auto;}
.desc {margin: 20px auto 0;text-align: center;}
.animate {animation: round 10s linear infinite;}
@keyframes round {
100% {
transform: rotate(1turn);
}
}
JS
var isPlaying = false;
var container = document.querySelector('.wp');
var image = container.querySelector('img');
image.addEventListener('click', function bindEvent() {
isPlaying ? pause() : play();
});
function pause() {
isPlaying = false;
var iTransform = getComputedStyle(image).transform;
var cTransform = getComputedStyle(container).transform;
container.style.transform = cTransform === 'none'
? iTransform
: iTransform.concat(' ', cTransform);
image.classList.remove('animate');
}
function play() {
isPlaying = true;
image.classList.add('animate');
}
-
IOS移动端click事件300ms的延迟相应
原因： 移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单机事件和双击屏幕缩放的历史原因造成的。
解决方法：监听fastclick事件；监听touchstart事件 -
一些情况下对非可点击元素（label，span）监听click事件，ios下不会触发
解决方法：css增加cursor：pointer
-
底部输入框被键盘遮挡问题
解决方法：
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
-
使用transform:translate3d(-50%,-50%,0)居中弹框（div）时，在pc端，内部的文字会模糊
解决方法：不使用transform,使用vertical-align,给要居中的元素设置一个兄弟元素，然后让这个兄弟元素宽度为1，高度为100%，透明度为0。
-
ios input不能自动focus
解决方法：模拟自动聚焦
HTML
<input type="text" id="focus" />
JS
document.addEventListener('touchstart',function(e){
document.getElementById('focus').focus();
});
-
vue.js 通过@on不能监听到键盘事件（keypress，keyup，keydown）
解决方法： 通过原生js的addEventListener监听
-
安卓手机line-height不居中
原因：
1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
2.使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。
解决方法：
1、设置字体大小大于12px，然后用transform: scale()缩小到需要的大小
2、在元素外再包一层，使用表格布局display: table-cell
