Mobile front-end: mobile page pitfalls and pitfall prevention techniques

[[124210]]

For front-end developers, there are more challenges on the mobile side. Various strange problems will be encountered in the process of mobile page development (commonly known as BUGs or pitfalls). So today I will share with you some pitfalls and pitfall prevention techniques in the process of mobile page development.

Mobile pages may cause various pitfalls that you have never encountered before on different devices, different operating systems, and different operating environments. There are more pitfalls than in IE6. Here are four common pitfalls:

1. Appearance

A. Page height rendering error

This kind of page height 100% rendering error often occurs in various mobile browsers. The bottom of the page overlaps with the system's built-in navigation bar. We need to reset and correct the incorrect height. Reset it through javascript code:

 document.documentElement.style.height = window.innerHeight + 'px' ;

B. Overlay area highlight

In some Android models, when you click on a certain area of ​​the page, a yellow box may flash for a second as shown in the figure. This is the default custom style of the system of some models. Give the element a CSS style reset:

 -webkit-tap-highlight- color :rgba( 0,0 , 0,0 );

2. Behavior

A. The event cannot be triggered

In the WeChat environment of some Android models, events cannot be triggered and forms cannot be input. We set the style for elements that require input or trigger events: -webkit-transform: translate3d(0,0,0) , but the new version of WeChat has directly fixed this problem.

B. :active effects are incompatible

The CSS :active pseudo-state effect is not compatible with Android versions below 4.0. We bind an empty anonymous method to the touch series events (touchstart/touchend/touchmove) of the element:

 var element=document.getElementsById("btnShare");
 element.addEventListener('touchstart',function(){},false);

3. Application

A. Browser crash

var act = function (){
    window.removeEventListener('devicemotion',act);
 };
 window.addEventListener('devicemotion',act,false);

The unbinding function is written in the event processing, which causes WeChat in Xiaomi mobile phones to crash. So we don’t need to write the unbinding time in the event processing.

B. Preloading and autoplay are invalid

As shown in the table above, after a simple test, it is found that the effectiveness of preloading and autoplay is affected by the operating system, browser (webview), version, etc. Apple officially stipulates that audio can only be loaded when manually triggered by the user. So after capturing user input once, let the audio load to achieve preloading:

 //play and pause it once   
 
 document.addEventListener( 'touchstart' , function () { 
 
 document.getElementsByTagName( 'audio' )[0].play(); 
 
 document.getElementsByTagName( 'audio' )[0].pause(); 
 
 });

C. Unable to play multiple audios at the same time

[[124215]]

In Android devices, playing the latter audio will interrupt the previous audio instead of playing synchronously. This is determined by the current system seniority. We can only take the method of graceful demotion to let Android choose different styles of audio to switch back and forth instead of playing them at the same time, so as to achieve an audio effect close to the expected one.

D. Does not support partial scrolling

In Android 4.0 and below, setting the scroll bar with overflow:scroll style for elements outside the body (html) element is invalid. Here are two solutions:

1. Use layout to directly set the style of the scroll bar on the body (html), and other elements will "illusion scroll".

2. Use iscroll and self-written js to control translate and scrollTop simulation.

4. System / Hardware

A. Weird floating form

In some Android models, the input box may have a weird and redundant pop-up form as shown in the figure. After observation and testing, it is found that only the input box of type input:password exists. Then we only need to use the input box of type input:text and hide the input password through the style -webkit-text-security: disc; to solve it.

B. Error scroll bar

A scroll bar that shouldn't appear appeared in the embedded page of the game, and the content did not exceed the width of the content area. After testing, overflow:hidden was invalid. After a series of attempts, the old <body scroll="no"> writing method was used to solve it. Try different writing methods and attributes and you will have different surprises!

C. Link to open the system browser

In some Android devices, clicking on a link in the game's webview may call the system browser, which is a very bad experience. Then we can try to add the target="_blank"' attribute to this element to solve it. If it still doesn't work, then we need to modify the iOS or Android native system function.

D. Flex box is not compatible

In the embedded webview of the game, the Flex box layout is not compatible. As shown in the figure, the navigation in the lower part is misplaced. Although the compatibility of Flex box has been carefully checked before, it is impossible to determine the system browser version and compatibility called in the embedded page of the game, which leads to errors. So we wrote a complete historical version of the 3 Flex box solutions. So we think that writing styles in a conservative and stable way can reduce unnecessary troubles in the process of writing pages.

Faced with so many pitfalls, there are various existing and unknown pitfalls. It is impossible to finish talking about them one by one in time, and it is even more impossible to have solutions for all of them. We need to learn how to solve the pitfalls:

To solve the pitfalls, you first need to have a strong execution ability and explore unknown problems through continuous attempts. So what methods, steps and techniques do we generally use to try?

1. First we need to locate the problem. We can use the following methods:

A. DOM Isolation Positioning Method

Isolate the DOM from large to small scopes to find the DOM element that triggers the problem

B. Style and JS elimination method

Keep removing some JS and CSS to observe and debug to check whether the problem is caused by some JS and CSS properties

C. Multi-operation environment testing method

Test in multiple environments to check if the problem is caused by a specific environment

D. PC and mobile phone joint debugging method

Combine PC and mobile phone for positioning, such as remote debugging iPhone/iPad through Mac

2. We can try the following ways to solve the problem:

* Try, change your thinking, and solve problems

* Graceful demotion, differentiated processing, and communication

* Search and ask questions ...

And the following thinking:

* Alternative

* detour

* segmentation ......

3. In the process of problem solving, we need to learn to use search and communication resources to solve problems:

A. google

B. stackoverflow

C. Colleagues, friends, QQ groups, forums, etc.

Google and stackoverflow allow you to search for information related to the problem more easily and accurately. At the same time, QQ groups and forums allow you to directly communicate with others about the problems they encounter and their solutions.

After discovering and solving the problem, it is more important to learn how to summarize the problem:

A. Summarize and record the conditions, solutions and process of problem generation

B. Analyze the principles and conditions of occurrence as much as possible to avoid repeating the same mistakes

C. Share with more people

There are endless pits. As more people walk through them and share their experiences, the pits will become flatter.

While summarizing and recording the problems, we have compiled a mobile tip to record the problems and some pitfalls. Although it is not perfect yet, we hope to share it with more people and hope that more people can participate in improving it.

Link: https://github.com/tgideas/mtips