Mobile Front End Series--mobile page pit and pit tips

For front-end developers, there are more mobile challenges, mobile page development process will encounter a variety of strange problems (we commonly known as bugs or pits), then today I share the mobile page development process of some pit and pit skills.

Mobile pages in different devices, different operating systems, different operating environment can cause a variety of non-encountered pits, compared to the former IE6 pit more. The following is a description of the 4 types of specific common pits:

1. AppearanceA, page height rendering error

In each mobile browser often appear this page height 100% rendering error, the low end of the page and the system comes with the navigation bar coincident, the height is not correct we need to reset it, reset it by JavaScript code:

Document.documentElement.style.height = window.innerheight + ' px ';

B, overlay area highlighting

In some Android models, click on a section of the page may appear in the yellow box of the second Flash, which is the default custom style of some models of the system itself, to the element a CSS style reset:

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

2. BehaviorA. Event cannot be triggered

In the context of some Android models where events cannot be triggered and forms cannot be entered, we set the style for elements that require input or triggering events:-webkit-transform:translate3d (0,0,0), However, the new version has directly fixed the problem.

B: The active effect is not compatible

The css:active pseudo-state effect is not compatible with the Android 4.0 version, we bind an empty anonymous method to the element's Touch Series event (Touchstart/touchend/touchmove) :

var Element=document.getelementsbyid ("Btnshare");
Element.addeventlistener (' Touchstart ', function () {},false);

3. ApplicationA, browser crashes

var act = function () {
Window.removeeventlistener (' devicemotion ', act);
};
Window.addeventlistener (' devicemotion ', act,false);

The Unbind function is written in the event processing to cause the crash of the Xiaomi phone, so we do not write the time of the Unbind in event processing.

B, pre-load, AutoPlay invalid

As shown in the table above, after a simple test to find that preload, the effectiveness of AutoPlay is affected by the operating system, browser (webview), version, etc., Apple Official rules must be manually triggered by the user to load audio, then we capture a user input, let the audio load implementation preload :

Play and pause it once

Document.addeventlistener (' Touchstart ', function () {

document.getElementsByTagName (' audio ') [0].play ();

document.getElementsByTagName (' audio ') [0].pause ();

});

C. Cannot play multiple audio simultaneously

In the Android device , playing the latter audio will interrupt the previous audio, but not synchronized playback , this is the current system senior decision, we only take the graceful down the right way to let Android choose a different style of audio before and after switching playback instead of simultaneous playback, Achieve an audio effect that is close to the expected.

D, partial scrolling is not supported

The overflow:scroll style setting ScrollBar is not valid for elements other than the body (HTML) element below the Android 4.0 version , there are two solutions :

1, skillfully with the layout directly set the style scroll bar on the Body (HTML), the other elements "illusion scrolling."

2, using iscroll, self-write js control translate,scrolltop simulation

4. System /Hardware A, weird suspension of the form

In some Android models the input box may appear weird superfluous flyout, after observation and testing found only input:password type of input box exists, then we just use the Input:text type of input box and through the style -webkit-text-security:disc; Hide input password to resolve.

B, error appears scroll bar

In the Game inline page appears the scroll bar should not appear, and the content does not exceed the content area width, after the test Overflow:hidden invalid, through a series of attempts to use the ancient <body scroll= "No" > Writing solution, Try a different way of writing and attributes will be a surprise Oh!

C, link open System Browser

It is a very bad experience to have a click-through link to invoke the System browser in some Android models that are webview in-game. Then we try to add the target= "_blank" property to this element is possible to resolve, if it is not resolved then need to modify the iOS or Android native system functions.

DFlex box is not compatible

In the game embedded WebView in the case of the Flex box layout is incompatible, the figure shows that the following part of the navigation dislocation, although the previous careful review of the Flex box compatibility, but in the game embedded page can not be determined that its call system browser version and compatibility, So led to the error, so we wrote the full history version of the 3 kinds of Flex box solution. Then we think in the process of writing a page or in a conservative and stable way to write style can reduce the trouble.

faced with so many pits, there are all kinds of already and unknown pits, time can not be finished, more unlikely to have a solution , we need to learn how to solve the pit :

To solve the pit you need to have a strong executive power, through the constant attempt to explore the unknown problems, then what are the general steps and techniques we will try?

1, first we need to locate the problem, we can use the following methods:

A,Dom Isolation location method

Dom elements that are constantly isolated from a wide range to a small range to isolate and trigger problems

B, style,js culling method

Constantly remove some js,CSS Watch debugging check whether it is caused by some js,CSS Properties problems

C, multi-run environmental testing method

Test in a multi-environment to see if it is caused by a specific environment

D,pc and mobile phone joint debugging method

United PC and mobile phone positioning, such as: remote debugging via Mac Iphone/ipad

2, we can try to solve the problem in the following ways:

* Try, turn your mind around and solve

* Graceful down right, differentiated treatment, communication

* Search and ask questions ...

And the following thinking:

* Alternative

* 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 Group, forum, etc.

Google and StackOverflow make it easier for you to quickly search for more accurate information about problems, as well as friends QQ groups, forums and so on so that you can directly communicate with others about the problem and solutions.

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

A, summarize record the problem to produce the condition, the solution method and the solution process

B, as far as possible to analyze the principle, the conditions produced, avoid repeating

C, share to more people

Endless pit, walk more people, summed up the share of more, the pit is more and more flat

We summarize the records of the problem at the same time, organized a mobile tip, record problems and some pits, although not perfect at present but hope to share to more people also hope that more people can participate in the improvement.

Mobile Front End Series--mobile page pit and pit tips