前端开发中的踩坑记

1.IOS系统在微信环境下audio不自动播放

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 
<script> 
     //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
     document.querySelector('audio').play()
    //微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
    document.addEventListener("WeixinJSBridgeReady", () => { 
        document.querySelector('audio').play()
        document.querySelector('video').play() //视频自动播放
    }, false)
</script>

Vue 环境下可以用下面这个试试

setTimeout(() => {
    const ev = new CustomEvent('WeixinJSBridgeReady')
    document.dispatchEvent(ev)
}, 5000)
this.$nextTick(() => {
    document.addEventListener('WeixinJSBridgeReady', () => {
        document.querySelector('audio').play()
    }, false)
})

2.canvas 模糊问题

由于画布大小限制, 导致在高清屏下画布被拉伸, 画布被放大, 画布尺寸偏小, 类似于把图片放大导致模糊

// 获取像素比
let getPixelRatio = function (context) {
 let backingStore = context.backingStorePixelRatio ||
 context.webkitBackingStorePixelRatio ||
 context.mozBackingStorePixelRatio ||
 context.msBackingStorePixelRatio ||
 context.oBackingStorePixelRatio ||
 context.backingStorePixelRatio || 1;
 return (window.devicePixelRatio || 1) / backingStore;
};
//画文字
let myCanvas = document.querySelector("#my_canvas");
let context = myCanvas.getContext("2d");
let ratio = getPixelRatio(context);
myCanvas.style.width = myCanvas.width + 'px';
myCanvas.style.height = myCanvas.height + 'px';
myCanvas.width = myCanvas.width * ratio;
myCanvas.height = myCanvas.height * ratio;
// 放大倍数
context.scale(ratio, ratio);

3.ios 表单输入框 页面会被顶上去不回弹

当输入框失焦时添加一个事件

el.scrollIntoViewIfNeeded(true)

4.ios input type=number 无效解决办法

给 input 添加 pattern="[0-9]*" 属性

5.ios 绑定事件时失效问题

ios有这么个设置：对于点击的对象，拥有cursor:pointer这个样式的设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件
解决办法：给 元素添加cursor:pointer

6.ios 动画暂停播放无效

animation-play-state 在 ios 下回失效
曲线救国办法

<div class="audio pause" @click="audioSet">
    <div class="rotate">
        <audio class="audios" :src="src"></audio>
    </div>
</div>

audioSet () {
    let audio = _$('.audio'), audios = _$('.audios');
    if (audio.classList.contains('pause')) {
        audios.play();
    } else {
        audios.pause();
        let box = getComputedStyle(audio)['transform'], rotate = getComputedStyle(_$('.rotate'))['transform'];
        audio.style.cssText = 'transform: ' + (box == 'none' ? rotate : box.concat(rotate));
    }
}

7.移动-微信获取视频元数据失效

document.querySelector('video').videoWidth 得到的值为 0;
暂无没有办法解决

8.ios 下里面图片圆超出问题

在 ios 下给外面的盒子 border-radius:50%;overflow:hidden 没用
---解决办法是给里面的图片也变成圆 border-radius:50%

9.给 input 设置 readonly 属性后在 ios 下还会出现光标

<input class="flex center userimg" type="text" readonly="readonly" placeholder="请选择" unselectable="on" onfocus="this.blur()">

10.ios 多媒体 设置播放时间差异

ios系统直接设置无效，在判断音乐可播放时（canplay）再设置currentTime才可以，但在安卓设备上也这样判断设置则也无效

11.ios 元素 隐藏坑

ios 上 visibility:hidden 隐藏元素后依然存在原地方, 后面的元素会出现点不到现象

总结: 以上是一些工作中的踩坑, 如果有不对欢迎各位指出, 希望与大家一起交流