Mobile front-end notes-common JS and CSS problems encountered and how to solve them

The author touches the mobile front-end nearly a year, special will usually some of the notes sorted out, hoping to give the people who need some small help. At the same time, because the author's level is limited, although the author has encountered the use of, but the text may also appear some problems or not rigorous places, I hope you point out, greatly appreciated!

A. CSS section

2. Body if set Height:100%;overflow:hidden is still can slide, if need to prohibit, add a layer div set height:100% plus Overflow:hidden (html,body plus height:100%) , so that the element cannot slide beyond the height of the body.
   Or at the same time add Height:100%;overflow:hidden to Html,body.

4. META tags

   <meta name= "viewport" content= "Width=device-width,initial-scale=1,user-scalable=no"/> Mobile plus this tag is really adaptive, Do not add, if you put a 980px width (mobile phone is 980) PC Web page on the phone display, can also be normal display does not appear scroll bar, but mobile device to the page has been reduced to optimize, so the font and so on are correspondingly reduced (980px is relative to the cell phone pixels, I have more than 1000px more of the scroll bar appears, this is not specific research).
   
   About initial-scale=1, this reference iphone5 size 320*568, if you do the page according to 640*1136, scale is set to 0.5

   <meta content= "yes" name= "apple-mobile-web-app-capable" > Safari in iOS allows full screen browsing
   
   <meta content= "Black" name= "Apple-mobile-web-app-status-bar-style" > Safari top status bar style in iOS
   
   <meta content= "Telephone=no" name= "format-detection" > Ignore turning numbers into phone numbers

   <meta content= "Email=no" name= "format-detection" > Ignore identification email

6. Do full-screen display of the picture, generally in order to compatible with most of the mobile phone, the picture size is generally set to 640*960 (I think this size is good, also see a lot of pictures is this size, depending on the situation)

8. Remove the WebKit scroll bar

   element::-webkit-scrollbar{

   Display:none;

   }

10. Remove the default style for button on iOS

    -webkit-appearance:none;

    border-radius:0

12. Do not want the button touch when there is a blue border-webkit-tap-highlight-color:rgba (0,0,0,0);

14. If you want to use fixed such as navigation and so on, you can achieve the same effect with absolute, the body is set to 100%, the element is absolute to the body, but this can not let the body scroll, if you need to scroll, put in the div scroll

16. Animation on the mobile side, if by changing the absolute positioning of the top, or margin to do the effect is very poor, very fluid, and the use of CSS3 transition or animation effect will be very good (this aspect of iOS than Android and much better).
    If you use Translate3d to achieve animation, will turn on GPU acceleration, hardware configuration Poor Android use will consume performance, need to use caution (Borrow 1 floor reviews)

18. When using the picture, you will find that there is always about 4px blank under the picture (the reason is that the picture is inline, triggering baseline ...). ) Common solutions are

    Img{display:block};

    Img{vertical-align:top} also has several other values, depending on the situation

    See this for other solutions

20. Learn to use the layout of Display:-webkit-box, can help us to do the page adaptive, such as the navigation bar these individuals feel particularly suitable, the specific use of the method is not described here

22. Use a tag, try to make a tag block, try to maximize the user clickable area

24. Two pages after using transform, the page under the Z-index sometimes will be invalid, I met, but not to seriously explore, just to improve the z-index, if you encounter this problem, detailed can see this

26. In iOS, when you click Input, such as input, the virtual keyboard pops up, the height of the entire window will be reduced to the height of the keyboard, adding you have fixed elements at the bottom such as btn, this element will run up, generally not too beautiful. I set it to absolute when I was a focus, depending on the situation.

28. Prevents users from selecting text-webkit-user-select:none

30. When you set input to width:100%, you may sometimes encounter input that is wider than the screen, and you can add an attribute to input Box-sizing:border-box

    With regard to Box-sizing:border-box, this property is to include the high width of the border in the width of the box, if you set two elements float and 50%, and all have border, this property can be used to perfectly allow them to display on the same line

32. If the TD of the table is set to a width beyond the partially hidden words with col, the table plus attribute table-layout:fixed (fixed-width layout)

34. If you want to change the style in placeholder, you need to use CSS pseudo-class. For example::-webkit-input-placeholder{color: #ccc}

Two. js section

1. If you use jquery to bind touch events, get Touchstart,touchmove's contact coordinates with E.originalevent.targettouches[0].pagex and get touchend with E.originalevent.changedtouches[0].pagex

2. Get the rotate value of transform by using style

   parseint (/rotatex\ (. *?) \)/.exec (GetALL.style.webkitTransform) [1])

   If the page does not have a style value at the beginning, rotate is written in CSS, need to use getComputedStyle, see here.

3. In some versions of iphone4, audio and video default playback events do not trigger, such as using window.onload or timers, etc. can not trigger playback, you must use JS write event to let the user manually click the trigger to start playing

4. If you want to add a parameter to Touchmove:function (e, Parameter i), the result will be an e error using the E.preventdefault () and the processing method is

   Touchmove:function (E, parameter i) {

   var e=arguments[0]

   E.preventdefault ()

   }

5. HTML5 's new JS API has new selectors, such as Queryselector (". Class #id") and Queryselectorall (". class element").
6. When you click on an element, the use of touchstart triggers immediately, while using the click has a delay of about 0.3s

Three. Part

2. Decide whether to come from a browser

   function Isfromweixin () {

   var ua = Navigator.userAgent.toLowerCase ();

   if (Ua.match (/micromessenger/i) = = "Micromessenger") {

   return true;

   }

   return false;

   }

4. Determine the type of phone

   var user= "";

   if (/android/i.test (navigator.useragent)) {

   Android

   user= "1";

   }

   if (/ipad|iphone|mac/i.test (navigator.useragent)) {

   Ios

   user= "0";

   }

6. The downloaded link cannot be opened in the browser and must be opened in the browser.

8. If in the Web page nested a iframe,src for other URLs, etc., when the browser opens, if the page in the Irame is too large, the IFRAME src can not be loaded (how much do not know, just met)

10. After upgrading to 6.0, in the Web page need to use the settings to share the title, etc., need to use the JSSDK, at the same time to the public platform to bind the domain name of the Web page.
    But jssdk not all the problems are solved, in the Android click to share the circle of friends triggered a successful sharing of the callback function, even if the cancellation of the share has triggered a successful function (now do not know if there is a fix, if you encounter such a problem, this should be the reason)

Mobile front-end notes-common JS and CSS problems encountered and how to solve them