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 暗藏元素后仍然存在原中央, 前面的元素会呈现点不到景象
总结: 以上是一些工作中的踩坑, 如果有不对欢送各位指出, 心愿与大家一起交换