Summary of Mobile crawl pits

One, the iOS system under the input box to get focus, click on the blank space without losing focus

Today after writing the project Test suddenly found that the iOS system input box to get focus activation soft keyboard pop-up after clicking on the blank soft keyboard is not going to go down, and finally found that the original click on the blank input box does not lose the focus of the problem; and then put it on the Android system test does not exist this issue.

Solution: Manually add the program to listen for input and lose focus events, to get focus when the Touchend event is bound, when the Touchend event contact in the blank place its input box loses focus.

Objblurfun ("Input");//if the current touch point is not on input, it loses focus .functionObjblurfun (sdom,time) {varTime = time| | 300; //determine if it is an apple    varIsiphone = Navigator.userAgent.toUpperCase (). IndexOf ("IPHONE")! =-1; if(isiphone) {varobj =Document.queryselectorall (sdom);  for(vari=0;i<obj.length;i++) {Objblur (obj[i],time); }    }}//element loses focus hide iphone's soft keyboardfunctionObjblur (sdom,time) {if(sdom) {Sdom.addeventlistener ("Focus",function() {Document.addeventlistener ("Touchend", Doctouchend,false); },false); }Else{        Throw NewError ("Objblur () no element found"); }    varDoctouchend =function(event) {if(event.target!=sdom) {SetTimeout (function() {Sdom.blur (); Document.removeeventlistener (' Touchend ', Doctouchend,false);        },time); }    };}

Second, the input box to get focus after the soft keyboard bounce compression visual interface to make its layout confusion

Mobile is full of self-confidence, is proud of their perfect layout, is often bounced off the soft keyboard and upset. In this project, the return home button of the fixed position is encountered when the soft keyboard arises due to the compression of the visual interface resulting in the layout of fixed positioning elements

Solution: Because the soft keyboard bounces from below, we can avoid this problem by positioning the fixed positioned element relative to the top.

Third, fixed positioned element fails when parent element transform property value is not none

The specification specifies that if the transform value of an element is not none, then the element will generate a containing block and cascading context, causing its fixed positioning, absolute positioning element, and cascading context (index) to be affected

Transform specification

Solution: Do not place the fixed positioned element inside an element that has the transform attribute

　　

Four, the scroll bar style is not unified

Mobile side when the content beyond the fixed height of the container out of the scroll bar, under the Android phone scroll bar style is thicker, very ugly, there is no scroll bar under the Apple phone, while scrolling with a sense of congestion, sliding is not smooth;

Solution: Use third-party components such as: Iscroll, MUI, etc.

　　

　　

Summary of Mobile crawl pits