遇到的前端兼容性问题

开发过程遇到的一些兼容性问题，很多都已经忘记了，把还记得的记录下。不断更新！！！

• 移动端视频播放的坑

  IOS: 自动播放、全屏播放
  Android: 默认样式、伪全屏

• jQuery的getJSON在IE浏览器不能重复发送同一个请求

  解决方法：在请求的URL添加时间戳参数 ts=new Date().getTime()

• iOS 上 animation-play-state 失效.

  解决方法： 状态叠加

HTML

  

点击图片播放/暂停

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

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