1. Audio does not automatically play in WeChat environment on iOS system

< script SRC = "http://res.wx.qq.com/open/js/jweixin-1.6.0.js" > < / script > < script > / / in general, so that it can be played automatically, Document. querySelector('audio'). Play () // WeChat must be added to Weixin JSAPI's WeixinJSBridgeReady for it to work document.addEventListener("WeixinJSBridgeReady", () => {document.querySelector('audio').play() document.querySelector('video').play()}, false) </script>

Try this out in a VUE environment

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

2. Canvas blurring problem

Due to the limitation of the canvas size, the canvas is stretched and enlarged in HD screen, which makes the canvas size too small. It is similar to the blurring caused by enlarging the picture

/ / get pixel than 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; // Scales context.scale(ratio, ratio);

3. The input field page of the iOS form will be pushed up and not bounced back

Adds an event when the input field is out of focus


4. IOS input type=number is invalid

Add pattern=”[0-9]*” to the input

5. IOS binding event failure problem

Cursor :pointer (cursor:pointer) : cursor:pointer (cursor:pointer) : cursor:pointer (cursor:pointer) : cursor:pointer (cursor:pointer

6. IOS animation pause is invalid

Animation-play-state failure curve in the next return of iOS

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

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

7. Failure to move – WeChat to get video metadata

Document.querySelector (‘video’).videoWidth returns a value of 0; There is no way to solve it

8. The image circle in iOS is out of line

Under iOS give the outer box border-radius:50%; Overflow :hidden doesn’t work — the solution is to make the image inside a circle, border-radius:50%

9. The cursor will appear on iOS after setting the readOnly property to the input

<input class="flex center userIMG "type="text" readOnly =" readOnly" placeholder=" unselectable="on" onfocus="this.blur()">

10. Difference in playing time of iOS multimedia Settings

CurrentTime is not valid on iOS (CanPlay), but it is also invalid on Android devices

11. IOS element hiding pit

Visibility: In IOS, the hidden element still exists in the original place, and the next element will not be visible

Summary: the above is some work in the pit, if there is wrong welcome to point out, hope to communicate with everyone