Mobile-WebApp development encounters the pits, as well as the pits scheme! Continuous Update ~ ~ ~

Foreword: In the Mobile Terminal WebApp development will encounter a variety of problems, through this article to do a summary of the problems encountered, to facilitate their own future inquiries, but also to the front-end development of friends to do a reference.

This article is related to the problem I encountered in the development, the solution is I think and query the results of information, purely personal insights, a demand, there are thousands of ways to achieve, so if there is ambiguity, please gently spit groove!

This article will continue to update, pre-content will be more cluttered, to be q&a accumulated to a certain amount, will be organized.

Css3

1. Q:CSS3 animation is running normally in iOS and cannot be run on Android. caused by incorrect writing of '-webkit-' prefixes

The a:-webkit-prefix does not have a write specification. The following is the complete CSS3 animation code (infinite 360° rotation). ' Animation ', ' @keyframes ', ' transform ' needs to be prefixed with '-webkit-' in all three places, so check to see if the prefix is written correctly.

1 img{2 Animation:payLoad. 5s Linear Infinite;3 -webkit-animation:payLoad. 5s Linear Infinite4}5 @keyframes payLoad{6 From {7 Transform:Rotate (0deg)8}9  to{Ten Transform:Rotate (360deg) One} A } - @-webkit-keyframes payLoad{ - From { the -webkit-transform:Rotate (0deg) -} -  to{ - -webkit-transform:Rotate (360deg) +} - }

Click events

1. The Q:touchend event is triggered normally on iOS and cannot be triggered on Android. Due to the Touchmove event, it is said to be an Android browser bug, please check separately.

A: Please add touchmove event, execute ' e.preventdefault (); ' command so that the ' touchend ' event can be triggered normally, but simply adding this will cause all default touchmove to be banned, so add the condition ' if Else ' before the command (specific conditions are added according to the project requirements)

1 document.body.addEventListener (' touchmove ',function(e) {2    if( X>y) {3        e.preventdefault (); 4 5} )     

Mobile-WebApp development encounters the pits, as well as the pits scheme! Continuous Update ~ ~ ~