Mobile side front-end notes-common JS and CSS problems encountered and solutions

I have been in contact with the mobile front end for almost a year, and I have compiled some of the usual notes, hoping to give some help to those in need. At the same time, because the author's level is limited, although I have encountered it before, but there may be some problems or rigorous places in the article, I hope you point out, be grateful!
I. css part

If the body is set to height: 100%; overflow: hidden can still slide, if you need to prohibit it, you need to add another layer of div to set height: 100% and overflow: hidden (html, body plus height: 100%), so that the element exceeds The height of the body can no longer slide.
Or add height: 100% to html and body at the same time; overflow: hidden
meta tags

<meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no" /> Adding this tag on the mobile terminal is truly adaptive. If you do n’t add it, if you put A PC page with a width of 980px (normally 980 on a mobile phone) is displayed on a mobile phone, but it can be displayed normally without scroll bars, but the mobile device has reduced the size of the page, so the fonts have been reduced accordingly (980px is Compared to the pixels of mobile phones, mine is more than 1000px and scroll bars appear, this is not specifically studied).

Regarding initial-scale = 1, this refers to the size 320 * 568 of iPhone 5. If your page is made according to 640 * 1136, the 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 recognition email

When making a full-screen picture, in order to be compatible with most mobile phones, the picture size is generally set to 640 * 960 (I think this size is good, and many pictures are also this size, depending on the situation)
Remove webkit scrollbar

element ::-webkit-scrollbar {

       display: none;

}

Remove button's default style on ios

-webkit-appearance: none;

border-radius: 0

Don't want to have a blue border when the button touches -webkit-tap-highlight-color: rgba (0,0,0,0);

If you want to use fixed, such as navigation, you can use absolute to achieve the same effect, set the body to 100%; just place the element on the body, but this can not make the body scroll, if you need to scroll, place it scroll in div

If you make an animation effect on the mobile terminal, if you change the absolute positioning of the top or margin, the effect is very poor and not smooth, and the effect of transition or animation using css3 will be very good (in this aspect IOS is better than android And a lot better).
If translate3d is used to implement animation, GPU acceleration will be turned on. Android with poor hardware configuration will consume performance and should be used with caution (borrowed from the review on the first floor)

When using an image, you will find that there is always a 4px blank space under the image. (The reason is that the image is said to be inline, which triggers the baseline ...) Common solutions are

img {display: block};

img {vertical-align: top} can also take several other values, depending on the situation

Other solutions see here

Learning to use the layout of display: -webkit-box can help us to achieve page adaptation, such as the navigation bar. These individuals find it particularly suitable. The specific use method is not described here.

If using a tag, try to make the a tag block as much as possible to maximize the user clickable area

After using transform on the two pages, the z-index under the page sometimes fails. I have encountered it, but I did n’t go into it seriously, just increase the z-index. If you encounter this problem, you can see the details This

In iOS, when you click, for example, input to prepare for input, the virtual keyboard pops up, and the height of the entire window will become minus the height of the keyboard. Add an element that you have fixed at the bottom, such as btn, and this element will run up. Generally Are not too beautiful. I set it to absolute when focus, depending on the situation

Prevent user from selecting text -webkit-user-select: none

When you set the input to width: 100%, sometimes you may encounter that the width of the input exceeds the screen. At this time, you can add a property to the input box-sizing: border-box

Regarding box-sizing: border-box, this property is to include the height and width of the border in the height and width of the box. If you set two elements float and each account for 50%, and both have borders, this property can be perfect To make them appear on the same line

If the width of the td of the table is set with col and the excess is hidden, add the attribute table-layout: fixed to the table (fixed width layout)

If you want to change the style in placeholder, you need to use the css pseudo-class. E.g. ::-webkit-input-placeholder {color: #ccc}

JS part

If you use jquery to bind the touch event, get the touchstart, and use the e.originalEvent.targetTouches [0] .pageX for the touch coordinates of the touchmove. Use e.originalEvent.changedTouches [0] .pageX for the touchend.

Use style to get the transform's rotate value

parseInt (/ rotateX \ ((. *?) \) /. exec (getALL.style.webkitTransform) [1])

If there is no style value at the beginning of the page, rotate is written in CSS, and you need to use getComputedStyle, please see here for details.

In some versions of iphone4, audio and video playback events are not triggered by default. For example, window.onload or timers cannot be used to trigger playback. You must write events in JS to allow users to manually click the trigger to start playback.

If you want to add a parameter to touchmove: function (e, parameter one), if you use e.preventDefault () directly, the error will be reported by e. The processing method is

touchmove: function (e, parameter one) {

Var e = arguments [0]

      e.preventDefault ()

}

HTML5's new js API has new selectors, such as querySelector (". Class #id") and querySelectorAll (". Class element").
When clicking on an element, using touchstart will trigger immediately, while using click will have a delay of about 0.3s

3. WeChat Section

Determine if it is from WeChat browser

function isFromWeiXin () {

    var ua = navigator.userAgent.toLowerCase ();

    if (ua.match (/ MicroMessenger / i) == "micromessenger") {

        return true;

    }

    return false;

}

Determine the type of phone

var user = "";

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

// android

            user = "1";

        }

        if (/ipadiphonemac/i.test(navigator.userAgent)) {

            // ios

            user = "0";

        }

The download link cannot be opened in the WeChat browser, it needs to be opened in the browser

If an iframe is nested in a web page, src is another URL, etc. When the page in irame is too large when the WeChat browser is opened, the src of the iframe cannot be loaded (I do n’t know how big it is, but I have encountered it)

After WeChat is upgraded to 6.0, you need to set the shared title, etc. on the WeChat page, and you need to use JSDDK. At the same time, go to the WeChat public platform to bind the domain name where the page is placed.
However, not all problems are solved in JSDDK. When you click Share to the circle of friends in android, the callback function for successful sharing is triggered. Even if you cancel the sharing, the successful function has been triggered. (I do n’t know if there is a fix. If you encounter this Class problems should be the reason)