The introduction

These are a series of compatibility problems encountered by the author in the development of H5 applications in the past. The principle of many solutions is not described, but only the ideas and skills to solve the problems are provided. Hope to help those engaged in H5 development students to reduce the time to solve compatibility problems.

1. Ios disables elastic scrolling

Problem description

Pages with no scroll bars or in extreme positions can still follow your finger up and down. Imagine if we were developing a component that listens for touch events, such as a signature component, and the spring effect would detract from the signing experience. So we need to disable and enable the spring effect depending on the specific business scenario.

To solve

Using Inobounce, manually turn on and off the spring effect depending on the business scenario.

iNoBounce.enable(); / / open
iNoBounce.disable(); / / close
iNoBounce.isEnabled(); // Whether it is available
Copy the code

There are only 3 apis, so it’s fairly simple.

2. Ios ADAPTS virtual home button

Problem description

Here’s the same picture:

As shown, there is a black bar (virtual Home button) at the bottom of the screen. If the page has a bottom menu, this is extremely difficult to use and aesthetics. Baidu can search for some solutions, but the simplest and most convenient solution is my first choice. The compatibility and difficulty of the following solutions are acceptable and recommended.

To solve

Setting the HTML header

<meta content="viewport-fit=cover" />
Copy the code

The CSS uses the following system variables

For compatibility, use both env and constant

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
Copy the code

3. Ios corrects image orientation

Problem description

We have developed the function of watermarking pictures before. At that time, we used Canvas to achieve this function: first, draw pictures with Cavas; Then use canvas to draw watermark text; Finally regenerate into a picture (many online tutorials, here is not detailed).

However, when using the enterprise wechat APP or wechat APP on iHPOne 8 or above for photo watermarking (the same problem may occur in other apps, but not absolutely), the picture is found to rotate, and other models are normal.

Why not use JSAPI to upload pictures? Because many third-party apps, jSAPI’s image uploading function will first save the image in the file service of the third party, but we do not want this situation to happen, we want to save the image in our own file service, so we give up jSAPI image uploading.

To solve

Since it is the problem of the model, it is special for the model:

  • Iphone8 and aboveRotating images
  • Under iphone8You don't do anything

Get the model to use JSAPI to get, through other “folk” get not reliable at all.

4, ios compatible popState merge trigger

Problem description

Let’s talk about the implementation of the application first, and then talk about the specifics, so it’s a little bit easier to understand.

Below is a diagram of h5 single page application simulating openWebview.

  • The slide component opens the target page (which is actually a component, since we’re emulating openWebview, we might as well call it a page), and for the sake of history, we call ithistory.pushStateTo generate aFalse hash(Only hash part is changed, pathname is not changed)
  • When the target page wants to close the current page, it calls an API executionhistory.back(), so we can close the current page (the current Slide component)

Concrete implementation is the above situation, let’s talk about the problem:

  • android: history.back() Run this command for n consecutive timesWill,Trigger n times popstate
  • Ios: history. The back () continuousPerform n timesAnd onlyTriggered once popstate

Um… ok… compatible!

To solve

Record the total number of times history.back() was executed, and only skip back through history.go() when it was last executed. You need event stabilization here.

The code is as follows:

// Omit the concrete implementation
let hideSlides = []
Slide.prototype.hide = function () {
    this.comp.hide();// The target page is immediately hidden. The routing logic behind it ignores it.
    hideSlides.push(this);
    lazyHide();
}
lazyHide = debounce(() = > {
    let hideIndex = hideSlides.length;
    if(! hideIndex)return;
    // At this point, it is clear that the Slides need to be removed
    if (hideIndex === 1) {
        history.back();
    } else{ history.go(-hideIndex); }},50)
Copy the code

5. Android avoids the soft keyboard blocking the cursor

Problem description

On Android, the input field is obscured by a soft keyboard that evokes focus.

I clicked on a field under phone 1 that was obviously obscured by the soft keyboard, preventing the user from seeing the input field.

To solve

Use the scrollIntoView method

dom.onfocus = function() {
	if (isAndroid) {
		setTimeout(function(){    
	    	dom.scrollIntoView && dom.scrollIntoView(false);
	  	}, 1000)}}Copy the code

6. Various problems with IFrame in ios

todo

7. Click penetration and click delay on mobile

todo

I hope you can understand and correct my mistakes.

Peace And Love.