audio

  • Audio cannot play automatically (ios restricts audio to play only after active user interaction due to user experience issues) Solution: Create audio tag in advance, and automatic playback will be triggered after user interaction
/ / - create a touch monitor, when open the browser page, touching the screen to trigger events, audio broadcast document. The addEventListener ('touchstart'.function () {
    var audio = document.getElementById('audio');
        audio.play();
});
Copy the code
  • In ios, audio can only play once and cannot be played again. Solution: Load () before play()
var clickAudio = null; // Play click soundfunction playClickMusic() {
    if(! clickAudio) { clickAudio = $('#click') [0]; } clickAudio.load(); clickAudio.play(); }Copy the code
  • Solution: Use the compositionStart and comPOSItionEnd events as switches to trigger the input event when Chinese input ends. The code is as follows. For details, see the solution for triggering multiple Input events using the ios input method
var flag = false;
$('#id').on({
    'compositionstart': function() {
      flag = true;
    },
    'compositionend': function() {
      flag = false;
      if(! flag) { //do something...
        doSomethingFunction(); }},'input propertychange': function() {
        if(! flag) { //do something...
          doSomethingFunction(); }}});Copy the code

video

  • In-page play solution: Add playsinline to the video TAB
<video src="" webkit-playsinline playsinline x5-playsinline></video>
Copy the code

X5-video-player-fullscreen =”true” x-webkit-airplay=”allow” x5-video-player-fullscreen=”true” x-webkit-airplay=”allow” x5-video-player-fullscreen=”true” x-webkit-airplay=”allow” x5-video-player-fullscreen=”true” x-webkit-airplay=”allow”

X5 kernel video API: Tencent X5 kernel API documentation in the video section

  • Common causes of video playback failure in ios

2. Video resources must support shard transmission (non-shard transmission cannot be played in Safari)

Reference: Nginx file fragment transmission configuration

other

  • The click event is delayed (cause: the client browser usually double clicks to enlarge the page, the browser will not trigger the click event immediately after the first detection, generally wait for 300ms after the next click event will trigger the click event) solution: fastclick

  • The solution: First use html2Canvas to draw the DOM on the canvas, and then use absolute positioning to place the picture on a button (setting opacity: 0.01, make the image invisible), and then trigger the context menu for the user to save the image;

Html2canvas can not draw display: None or position to move out of the display area of the DOM, but can draw z-index:-1 DOM, see html2Canvas pit remember 2. First enlarge the canvas according to devicePixelRatio (devicePixelRatio), turn off anti-aliasing, and then draw on the enlarged canvas; Then convert canvas into base64 and place the image on the original img.

Opacity :0.01 // html2canvas var cntElem = $()'.share-page') [0]; var shareContent = cntElem; Var width = shareContent.offsetwidth; / var/get dom width height = shareContent. OffsetHeight; Var canvas = document.createElement("canvas"); // Create a canvas node var scale = window.devicepixelRatio; // Define arbitrary magnification support for the decimal canvas.width = width * scale; // Define canvas width * scale canvas. Height = height * scale; // Define canvas height * scale canvas. GetContext ("2d").scale(scale, scale); Var opts = {scale: scale, // add the scale parameter canvas: canvas, // custom canvas // logging:trueWidth: width, //dom original width height: height, useCORS:true// allow cross-domain}; html2canvas(shareContent, opts).then(function (canvas) {
  var context = canvas.getContext('2d'); / / [important] close anti-aliasing context. MozImageSmoothingEnabled =false;
  context.webkitImageSmoothingEnabled = false;
  context.msImageSmoothingEnabled = false;
  context.imageSmoothingEnabled = false;

  var imgURL = canvas.toDataURL("image/png");

  var $img = $('<img src=' + imgURL + '>').css({
    width: canvas.width / scale + 'px',
    height: canvas.height / scale + 'px'}); // Bind long press event to save imagebindLongTouchSave($img); //.btn.save = $('.btn.save').append($img);
});
Copy the code
  • VisibilityChange event (triggered when a page’s visibility has changed, usually when the page switches to the background to stop playing music, etc.)

VisibilityChange (need to add browser prefix in early browsers), wechat also supports this event (check current page state by window.hidden); The event with the same function in QQ is qbrowserVisibilityChange (judging the current page status by e.hidden)

conclusion

Well, this time to summarize so much, such as later encountered to continue to summarize, compatibility problem is really a big pit for mobile developers ha, O(∩_∩) ha ha ~