Mobile compatibility summary. New issues will be continuously updated

background

In the last six months, I have been working on mobile TERMINAL H5, mainly in wechat and WebView in app. During this period, I encountered many compatibility problems with different systems and devices. I hope to compile a collection here for easy searching in the future. Of course, if you also happen to encounter the same problem, I hope to help you.

1. Audio and video problems

Why put it at the beginning, because there are a lot of compatibility problems with audio and video

Automatically play

  1. ios safariNot supported in iPhone Safari, but can be enabled in WebView. The iOS development documentation clearly states that autoplay is not allowed on cellular networks;
  2. In Chrome, SettingsmoutedThen it can play automatically
  3. Automatic play is not allowed in wechat. But with the help ofWeixinJSBridgeimplementation

Singleton problem

Audio objects in ios Safari are singletons, and you can’t play multiple audio files in ios

Loop for

Some ios models do not support loop playback

Solution: Listen to the ended event and manually trigger the playback

<! doctype html><html>
<head>
    <title>Looping Audio</title>
    <script type="text/javascript">
        function init() {
            var myAudio = document.getElementById("audio");
            myAudio.addEventListener('ended', loopAudio, false);
        }
        function loopAudio() {
            var myAudio = document.getElementById("audio");
            myAudio.play();
        }
    </script>
</head>
<body onload="init();">
    <audio id="audio" src="myAudio.m4a" controls></audio>
</body>
</html>

Copy the code

video

  1. Preload is not supported on ios. The common way to do this is with videoplay()Stop immediately after
  2. Ios Video Automatic full screen play: Set the inline attributeplaysinline webkit-playsinline

2. Poster generation -html2Canvas

In marketing scenarios and fission, we need to share part of the page content as an image. Most of the time

html2Canvas

If it is just a simple QR code and poster image, it is recommended to use drawImg directly instead of using this plugin

2.1 Cross-domain images

Solution: Set useCORS to true

  1. html2canvasTo provide theproxyplan
    await html2canvas(eleImgBox, {
      // If the requested image itself supports cross-domain requests (back-end Settings may be required)
      proxy: 'https://aliyun-oss.61info.cn'
    })
Copy the code
  1. Nginx does domain forwarding
  2. Like qr codes, consider Base64 images

3. Classic 1px border

Pseudo-element simulation is generally adopted. Principle: Remove the border of the original element, and then use :before or :after to redo the border and reduce the scale by half. The original element is positioned relative to the new border.

  .scale{
    position: relative;
    border:none;
  }
  .scale:after{
    content: ' ';
    position: absolute;
    bottom: 0;
    background: # 000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0;
  }
Copy the code

For specific methods, see:

Some understanding and solutions about developing 1px border on mobile terminal

4. Android, border-radius:50% not round

Specifically, because rem layout is used, in some models of the problem, set the specific PX value, not 50%

5. In Android, line-height is not in the middle

Solution: Source Internet

  1. Set the inside and outside margins of the font size to twice the required size and scale using transform. (Not applicable)
  2. Set the inside and outside margins of the size to 2 times the required size, using zoom, you can solve the problem perfectly. (can)
  3. Set line-height to 0 and use padding to spread the elements out.

Specific reason: Why line-height deviates from the vertical center in Android browser

6. Android version input placeholder is too high

Set line-height for input to normal

  input{
      line-height:normal;
  }
Copy the code

Answer on StackOverflow:

HTML5 placeholder css padding

7. The body setting on ios overflow: Hidden can still scroll

Wrap a big box around the outermost layer of all elements

  .wrap{
      position:relative;
      overflow:hidden;
  }
Copy the code

Stackoverflow has several options for handling stackOverflow:

Does overflow:hidden applied to work on iPhone Safari?

8. Ios doesn’t scroll smoothly

After using the Absolute layout, ios will find that scrolling within elements is not smooth. When the sliding finger is released, scrolling immediately stops and the original smooth scrolling feature is lost. Baidu the elastic scroll problem, found in WebKit, the following properties can restore elastic scroll.

-webkit-overflow-scrolling: touch;
Copy the code

9. Ios fixed problem

This is a common layout, but with ios fixed will not work when the keyboard is up. The solution is in the following article:

Fixed Web mobile terminal layout solution

Change page scrolling to in-container scrolling.

10. Understand the question

Also talk about touch events and click penetration

The fastclick.js library comes to mind first, but see this article for details on whether you really need it

FastClick calls Event.preventDefault in the TouchEnd phase and creates a MouseEvents with Document.createEvent, And then through the eventTarget. DispatchEvent trigger the corresponding target element binding on the click event

11. The keyboard blocks the input box

Solutions are as follows:

Mobile Web page, input get focus when pop-up system virtual keyboard, block input, solution?

12. Slide on the floating layer, and the page below the floating layer also scrolls

Floating scrolling on the Web mobile side prevents window forms from rolling JS/CSS processing

Set overflow values when floating layers appear and hide

13. Ios date conversion NAN issue

In ios, new Date(‘2020-11-12 00:00:00’) will be NAN

Reject solution: Use new Date(‘2020/11/12 00:00:00’) Date format, or write a regular conversion

14. The animation stops while ios is scrolling

Better Scroll is recommended for lazy mobile users, which is a good plug-in

Why CSS3 animation stops on ios because of page scrolling?

15. Hold down and blink back

    element {
        -webkit-touch-callout:none;
    }
Copy the code

16. Do not recognize digits as telephone numbers

   <meta name = "format-detection" content = "telephone=no">
Copy the code

17. The transition of the splash screen

  .box { 
       -webkit-transform-style: preserve-3d; 
       -webkit-backface-visibility: hidden; 
       -webkit-perspective: 1000; 
  }
Copy the code

18. CSS3 animation stuck

Use the transform as far as possible, avoid to use the height, width, margin, padding, etc. GPU hardware acceleration can be enabled, but use hardware acceleration should also be careful, because this also has a pit, improper use will make the application more and more jammed!

CSS3 hardware acceleration also has a pit

19. margin bottom

This is a typical bug that you can solve by using the padding-bottom option.

20. Scroll animation

Juejin. Cn/post / 689701…

21. iphoneX

const isIphonex = () => { // X XS, XS Max, XR const xSeriesConfig = [ { devicePixelRatio: 3, width: 375, height: 812, }, { devicePixelRatio: 3, width: 414, height: 896, }, { devicePixelRatio: 2, width: 414, height: 896, }, ]; // h5 if (typeof window ! == 'undefined' && window) { const isIOS = /iphone/gi.test(window.navigator.userAgent); if (! isIOS) return false; const { devicePixelRatio, screen } = window; const { width, height } = screen; return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height); } return false; }Copy the code

22. The moving end slides through

The content of the pop-up is obviously longer than the screen, so you need to slide the content of the pop-up, but do not slide the home page

<script type="text/javascript">
  // Solve the mask layer roll penetration problem, respectively after the mask layer ejected and before closing
  const ModalHelper = ( (bodyCls) = >{
    let scrollTop;
    return {
      afterOpen: function () {
        scrollTop = document.scrollingElement.scrollTop;
        document.body.classList.add(bodyCls);
        document.body.style.top = -scrollTop + 'px';
      },
      beforeClose: function () {
        document.body.classList.remove(bodyCls);
        // scrollTop lost after set position:fixed, restore it back.
        document.scrollingElement.scrollTop = scrollTop;
      }
    };
  })('dialog-open');
</script>

body.dialog-open {
  position: fixed;
  width: 100%;
}
Copy the code

Principle: When pop-up box, make the background home page content as a fixed location, so that the page sliding has no impact on it, close the pop-up box enable, remove the fixed location of the class name, return to normal

PS: Welcome to exchange and study, please point out any shortcomings.