Mobile front-end: mobile terminal page pitfalls and troubleshooting skills

Mobile front-end: mobile terminal page pitfalls and troubleshooting skills

For front-end developers, there are more challenges for mobile terminals. During the development of mobile pages, various strange problems are commonly known as bugs or pitfalls ), so today I will share with you some pitfalls and troubleshooting skills in the mobile page development process.

Mobile pages may cause a variety of pitfalls that have not been encountered in different devices, operating systems, and operating environments, which is more difficult than IE6. The following describes four common pitfalls:

1. Appearance

A. Page height rendering error

In mobile browsers, this rendering error of page height 100% often occurs. The low-end of the page overlaps with the navigation bar of the system. If the height is incorrect, We need to reset and correct it, reset it using javascript code:

 
 

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

B. Highlight overlapping areas

In some android models, clicking a part of the page may display a yellow box in seconds. This is the default custom style of some models. Reset the CSS style of this element:

 
 

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

2. Behavior

A. The event cannot be triggered.

In environments of Some android models, events cannot be triggered, and forms cannot be entered. We set the style for elements that require or trigger events:-webkit-transform: translate3d (0, 0, 0), but the new version has fixed the problem directly.

B. Incompatible active effect

CSS in android 4.0 or earlier versions: the active pseudo-state effect is incompatible. We will bind an empty anonymous method to the touch series event touchstart/touchend/touchmove of this element:

 
 

  
  
var element=document.getElementsById(”btnShare”); 
  
  
element.addEventListener(‘touchstart’,function(){},false); 
 
 

3. Applications

A. Browser Crash

 
 

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

The unbinding function is written in event processing, causing the crash of Xiaomi's mobile phone. Do not write the unbinding time in event processing.

B. The preload and automatic playback are invalid.

As shown in the table above, after a simple test, we found that the validity of pre-loading and automatic playback is affected by the operating system, browser webview, and version, according to Apple's official regulations, the user must manually trigger the request to load the audio. After capturing a user input, let's pre-load the audio:

 
 

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

C. Multiple audios cannot be played simultaneously.

On android devices, the last audio will interrupt the previous audio and not play it synchronously. This is determined by senior System Engineers, we only need to adopt an elegant downgrading method to enable android to switch back and forth for playing audio of different styles instead of playing at the same time to achieve the expected audio effect.

D. Partial scrolling is not supported.

In android 4.0 and later versions, overflow is an element other than the body (html) element: the scroll style settings scroll bar is invalid. There are two solutions:

1. You can use the layout to directly set the style scroll bar on the body (html). Other elements "illusion scroll ".

2. Use iscroll and self-writing js to control the simulation of translate and scrollTop.

4. System/hardware

A. Weird floating forms

Some input boxes in android models may display odd redundant forms. After observation and test, we found that only input boxes of the input: password type exist, so we only need to use the input: text-type input box and use style-webkit-text-security: disc; To hide the input password.

B. the scroll bar appears when an error occurs.

A scroll bar should not appear on the embedded page of the game, and the content does not exceed the content area width. The overflow: hidden test is invalid, try using the old <body scroll = "no"> method to solve the problem. Try different writing methods and attributes!

C. Open the system browser through the link

Some android models of webview in the game may click the link to call the system browser, which is a very bad experience. Then we try to add the target = "_ blank" 'attribute to this element, which may be solved. If it cannot be solved, we need to modify the functions of the IOS or android native system.

D. Incompatible Flex box

In the embedded webview of the game, the Flex box layout is incompatible. As shown in the figure below, the navigation is misplaced. Although you have carefully checked the compatibility of the Flex box, however, the browser version and compatibility of the called system cannot be determined on the embedded pages of the game, which leads to errors. Therefore, we can write three Flex box Solutions for the complete and historical versions. Therefore, we think that writing styles in a conservative and stable manner can reduce unnecessary troubles.

In the face of so many pitfalls, there are also a variety of existing and unknown pitfalls that cannot be completed in time, and more importantly, there are already solutions. We need to learn how to solve these pitfalls:

To solve the problem, we must first have a strong executive power and constantly try to find unknown problems. What steps and skills will we usually use to try?

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

A. DOM isolation and Positioning Method

Isolate the DOM from a wide range to a small scope to find and trigger the DOM element of the problem.

B. Style and JS elimination methods

Continuously remove some JS and CSS, and observe whether the debugging check is caused by some JS and CSS attributes.

C. Multi-run environment testing

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

D. Joint debugging of PCs and mobile phones

Work with PCs and mobile phones for positioning, such:Remote iPhone/iPad debugging through Mac

2. Try the following methods to solve the problem:

* Try, think, and solve problems

* Elegant downgrading, differentiated processing, and communication

* Search and ask ......

And the following ideas:

* Substitution

* Detour

* Split ......

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

A. google

B. stackoverflow

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

Google and stackoverflow make it easier for you to quickly search for information related to problems, at the same time, you can directly communicate with people about problems and solutions encountered by others through QQ groups and forums.

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

A. Summarize and record the problem conditions, solutions, and solutions.

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

C. share with others

There are endless pitfalls, and there are more people to go through, so there is more to sum up and share, and the pitfalls will become more and more flat.

While summarizing and recording the problem, we sorted out a mobile tip to record the problem and some pitfalls, although it is not complete yet, I hope to share it with more people and hope more people can participate in the improvement.

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