关于html5:前端开发中的踩坑记

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 暗藏元素后仍然存在原中央, 前面的元素会呈现点不到景象

总结: 以上是一些工作中的踩坑, 如果有不对欢送各位指出, 心愿与大家一起交换