Summary of mobile development practices, pitfalls, and development practices

Summary of mobile development practices, pitfalls, and development practices

Once again, my blog has not been updated for a long time.

I have done a lot of mobile projects. During the development and debugging process, a good debugging tool will greatly improve the efficiency. The blogger has previously recommended an artifact: http://www.cnblogs.com/beidan/p/5777476.html

 

Next, we will summarize the pitfalls encountered by mobile terminals.

 

1. input placeholder ProblemsWhen debugging the chrome simulated mobile terminal, the [left chart] shows very normal, but on the real machine [right chart], the content in placeholder is obviously on the top, which is very unattractive.

For foreign websites, do not design the line-height of input or set the line-height to normal,

I tried it. Although it was slightly higher in Google's simulated debugging, it was normal vertical center on the "real machine ~

 

2. line-height line-heightIt is often used for text center. Different mobile phones have different display effects. What ~ It is perfectly displayed on the chrome simulator,! Android and IOS are both 'offset. If line-heightWhen 1px is added, the iPhone text will be displayed a little 'normal display'. Because there are many ios users in our app, and there are too many android models, different models will be displayed, therefore, we can only return to the next level. The line-height compatibility problem is not well solved. The smaller the container height, the more obvious the display effect gap.

Solution:A slightly larger height, preferablyLine-height is set to height + 1px, and the display on both platforms is not too 'strange '.

 

3. Use rem (compatibility: ie9 +) Principle: browser's Default font heightAll are 16px. The unadjusted browser displays 1em = 16px. Rem is only relative to the font-size of the root element, that is, you only need to set the font-size of the root element, and other elements can use the rem unit to set the corresponding percentage;

General use:Set the font-size of html to 62.5%

 1 html { 2     font-size: 62.5%; 3 } 4 body { 5     font-size: 12px; 6     font-size: 1.2rem; 7 } 8 p { 9     font-size: 14px;10     font-size: 1.4rem;11 }

4. Implement custom native control styles

Because the native style of the select mobile terminal is ugly, the native pop-up style conforms to our design principles.

Solution: Set the original select to transparent, and set the z-index to high ~ Use a nice style to 'pretend to be 'on the surface

5. Draw using innerHtml on mobile devices

If you use innerHTML to draw a large segment and then want to obtain the ID node of HTML, you cannot actually get it. This problem often occurs when you create a DOM dynamically.

This is also an artifact problem. The blogger wrote a mobile carousel plug-in and browsed on chrome very normally, but it was displayed blank on the real machine, various Baidu, finally, I found such a pitfall...

Solution: After trying a lot of methods, the old and honest pages use html structure directly. If there is a better method, please let me know.

 

6.300ms latency

• Solution 1: Disable Scaling

The following content is contained in the HTML document header: metaTag: <meta name = "viewport" content = "user-scalable = no"/> <meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1 "/> disadvantage ------ you must disable scaling to remove the click latency. However, disabling scaling is not our original intention, we just want to disable the default double-click scaling, so that we don't have to wait ms to determine whether the current operation is double-click.

• Solution 2: Change the default port width

<Meta name = "viewport" content = "width = device-width"/>
If the precedingmetaThen, the browser can think that the website has been adapted and optimized to the mobile end, so you do not need to double-click the scaling operation.
The advantage of this solution is that it does not completely disable scaling, but only disables the default double-click scaling behavior of the browser. However, you can still scale the page through the double-finger scaling operation.   Compatibility: For solution 1 and solution 2, Chrome is first supported, followed by Firefox. However, Safari has a headache in addition to double-click scaling and double-click scrolling, you must disable double-click scrolling.

 

7. Click to penetrate

Common Problem scenarios: Assume that there are two elements A and B on the page. Element B is above Element. We have registered a callback function on the touchstart event of Element B. This callback function is used to hide Element B. We found that when we click element B, Element B is hidden, and element A triggers the click event.

This is because in Mobile browsers,The event execution sequence is touchstart> touchend> click.

The click event has a latency of Ms,After the touchstart event hides Element B, the browser triggers the click Event 300 ms, but Element B disappears, so the event is distributed to element.If Element A is A link, the page will jump to another place.

Solution:

1. Do not mix touch and click

2. click after the touch is consumed

Solution:

1. Use Only touch to replace all the clicks on the page with touch events (touchstart, 'touchend', and 'tap'). Note: The href of the a tag is also click and must be changed to js jump.

2. Minimum modification-ms before hiding Element B

 

8. Caused by a virtual keyboard Fixed Element dislocation

The fixed element is always accompanied by the appearance of the virtual keyboard, but the virtual keyboard is only "pasted" on the viewport, and does not have "any" impact on dom on the surface, however, in this case, the performance of the fixed element becomes odd and misplaced.

Solution Principle: Set the fixed element to static when the virtual keyboard pops up, and set it back when the virtual keyboard disappears.

Solution: Because the virtual keyboard does not throw an event, and the scroll or resize event is detected, there will be a certain delay and flashes. When the obtained focus element is a text element, the fixed element is set to static.

  9. Mobile gestures

Place your finger on the screen: ontouchstart slide your finger on the screen: ontouchmove your finger away from the screen: ontouchend

Principle:

1. When the touchstart event is triggered, record the finger press time startTime, the initial position of this slide initialPos.

2. when the touchmove event is triggered, the current position nowPosition (Real-time moving element) is recorded, and the sliding distance is movePosition (the difference between nowPosition and initialPos at the current position ), determine whether to move left or right after determining the positive or negative number.

3. When the touchend event is triggered, record the time when the finger leaves the screen endTime, get the time when the finger stays on the screen (endTime-startTime), and slide away from movePosition

• Determine whether to slide:

 

10. The iphone dynamically generated html element click is invalid.

This is also a magical pitfall. I have been searching for materials for a long time, and I have not explained the principles. Solution: add the css style cursor: pointer to the element bound to the click;

 

If this blog is helpful or rewarding, click the recommendation in the lower right corner. Thank you!