Mobile WEBAPP development difficulties and solutions! Continuous updates ~~~~, Webapp

Mobile WEBAPP development difficulties and solutions! Continuous updates ~~~~, Webapp

Various problems may be encountered in Mobile WEBAPP development. This article summarizes the problems to facilitate future queries, it also provides a reference for front-end developers.

The problems involved in this article are the problems I encountered during development. The solution is the result of my thinking and querying materials. It is purely personal opinions and a requirement. There are thousands of implementation methods in length, so if there is any ambiguity, please be gentle!

This article will be updated continuously, and the content in the early stage will be messy. After Q & A accumulates A certain amount, it will be sorted out.

 

Css3

1. Q: css3 animations run normally on Ios and cannot run on Android. Because the '-webkit-' prefix is incorrectly written

A:-webkit-there is no write specification for the prefix. The following is the complete css3 animation code (infinite 360 ° rotation ). 'Animate', '@ keyframes', and 'transform' must be prefixed with '-webkit-'. Therefore, check whether the prefix is correctly written.

 

 1 img { 2     animation: payLoad .5s linear infinite; 3     -webkit-animation: payLoad .5s linear infinite 4 } 5 @keyframes payLoad { 6     from { 7         transform: rotate(0deg) 8     } 9     to {10         transform: rotate(360deg)11     }12 }13 @-webkit-keyframes payLoad {14     from {15         -webkit-transform: rotate(0deg)16     }17     to {18         -webkit-transform: rotate(360deg)19     }20 }

 

Click Event

1. Q: The touchend event is triggered normally on Ios and cannot be triggered on Android. This event is caused by the touchmove event. It is said to be a BUG in the Android browser. Please check it again.

A: add the touchmove event and execute 'E. preventDefault (); 'command, so that the 'touchend' event can be triggered normally, but simply adding this option will disable all default touchmoves, therefore, add the condition 'if else' before the command (the specific condition is added according to the project requirements)

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