Mobile Web Development Experience Summary (1)

1.<meta name= "viewport" content= "initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no, Width =device-width ">width is width, Initial-scale initializes the scale, maximum-scale the maximum scale that allows the user to scale, minimum-scale the minimum scale that allows the user to scale, User-scalable whether the user is allowed to scale.

2.-webkit-tap-highlight-color:rgba (255,255,255,0) can simultaneously block the shadows that appear when an iOS hits an element.

3.-webkit-appearance:none can also mask the strange inner shadow of the input box.

4.-webkit-transform:translate3d (0, 0, 0) can make the animation smoother under iOS (this property calls Hardware acceleration mode), but it is not possible to use it in Android, resulting in a lot of unseen bugs.

[email protected] can predefine many of the animations you think of, and then call them through-webkit-transition.

6.-webkit-background-size can do high-definition icons, but some of the lower version of Android can only recognize Background-size, so it is necessary to write two, it is recommended to use this attribute tree yong cover this value, can automatically go to match width and height.

7. Multi-use Text-shadow this attribute, can beautify the text effect, Border-radius, Box-shadow, gradient, Border-image, in the mobile side can be very good support, using these properties can achieve a very gorgeous button.

8.android, iOS4 and below, fixed-width/blocks-level elements of Overflow:scroll/auto failure, a browser-based bug, can be achieved by means of third-party tools (Iscroll).

10.ios5+ can automatically hide the browser address bar through Scrollto (0,0).

11.CSS3 animations affect your autofocus, so auto-focus should be done before the animation is executed, or discarded directly.

The 12.input box will be paged out by default, if you want to hide the keyboard from losing focus.

13. When using Iscroll, you cannot use: focus{outline:0} pseudo-class, otherwise slide the card.

14. When using Iscroll, the click in some phones (some Xiaomi, Samsung models) will be executed two times because iscroll prevents the Click event before judging the swipe, and then after sliding, the original Click event is reconstructed, On some devices, the default click is not blocked. So, there is a similar double-click phenomenon.

Solution:

//1. Write a Fn-->myclick yourself, then onclick= "Myclick ();" Call. varT1 =NULL;//This setting is globalfunctionMyclick () {if(T1 = =NULL) {T1=NewDate (). GetTime (); }Else{              vart2 =NewDate (). GetTime (); if(T2-t1 < 500) {T1=T2; return; }Else{T1=T2; }    }    /*your own code.*/} //2. The above code can also be written in the _end method of Iscroll.js (4.2.5), note that var T1 is global//3. Foreign forum in Iscroll.js (4.2.5) corresponding location addtopoffset:0, Checkdomchanges:false,//ExperimentalHandleclick:true, Preventghostclick:false,//prevent ghost clicks? Prevent 2 clicksGHOSTCLICKTIMEOUT:500,//Timeout for Ghost Click Prevention Set time difference  /** * Prevents any real clicks.* see Preventghostclick portion of _end ().*/_preventrealclick:function(e) {if(E._fake!==true) {e.preventdefault ();        E.stoppropagation ();        E.stopimmediatepropagation (); E.cancel=true; return false; }},_end:function(e) {... ev._fake=true;if(That.options.preventGhostClick) {//Preventghostclick:true,    //prevent ghost Real clicks on bodyDocument.body.addEventListener (' Click ', That._preventrealclick,true); //until Ghost Click Timeout expiresSetTimeout (function() {Document.body.removeEventListener (' Click ', That._preventrealclick,true); }, That.options.ghostClickTimeout);} Target.dispatchevent (EV); //4. Use Zepto tap to replace click

15.iOS prohibits users from saving pictures, copying pictures, img tag specifies that-webkit-touch-callout is none to disable the device popup list button, so that users cannot save/copy your pictures.

16. Use of-webkit-user-select:none; Users are not allowed to copy, select.

Mobile Web Development Experience Summary (1)