当前位置: 首页 > Web前端 > HTML5

踩前端开发的坑

时间:2023-04-06 00:19:33 HTML5

1.IOS系统在微信环境下不自动播放音频在vue环境下,可以使用以下测试尝试setTimeout(()=>{constev=newCustomEvent('WeixinJSBridgeReady')document.dispatchEvent(ev)},5000)this.$nextTick(()=>{document.addEventListener('WeixinJSBridgeReady',()=>{document.querySelector('audio').play()},false)})2.画布模糊问题由于画布的大小限制,画布被拉伸,画布被放大,画布的大小高清屏下canvas很小,类似于放大图片导致模糊//获取像素比例context.webkitBackingStorePixelRatio||context.mozBackingStorePixelRatio我||上下文.msBackingStorePixelRatio||上下文.oBackingStorePixelRatio||上下文.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/backingStore;};//绘制文本letmyCanvas=document.querySelector("#my_canvas");letcontext=myCanvas.getContext("2d");letratio=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.iosinputtype=numberinvalid解决方法添加pattern="[0-9]*"attributetoinput5.ios绑定事件时失败问题ios有这样的设置:对于被点击的对象,它有cursor:pointer样式设置,也就是说当鼠标放在上面时,“手”图标可以认为可以使用点击事件解决方法:给元素添加cursor:pointer6.ios动画暂停播放无效animation-play-state在ios中下无效曲线救国

</div>audioSet(){letaudio=_$('.audio'),audios=_$('.audios');如果(audio.classList.contains('暂停')){audios.play();}else{audios.pause();letbox=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属性后,在ios10.ios多媒体设置播放时差ios系统直接设置无效,再设置currentTime在判断音乐可以播放(canplay)时有效,但在安卓设备上同样无效。11.ios元素隐藏洞可见性:hiddenonios元素隐藏后仍然存在于原处,后面的元素将无法点击。总结:以上是工作中的一些坑。如果有不对的地方,欢迎大家指出。希望与您交流