The sinkhole collection on each phone's browser

2. Remove an element from the IOS6 using RemoveChild () instead of remove (). Remove () is not supported until after IOS7.

   eg:chileNode.parentNode.removeChild(childNode);  //both okchildNode.remove();      

4. The new version of the Android version of the QQ browser X5 kernel, if there is a mobile phone number on the page, the browser will automatically give this phone number plus a tag, in the process of style to give this a tag to reserve the style. At present, the main performance in Millet 3 and millet 4. (or the A-label is added to the MI ROM, regardless of the X5 kernel.) ）

   eg:style:#phone{xxxx}#phone a{display:inline-block;width:80px;xxxxxxxxxx} /*this style is important*/html:<div id="phone">     <a faketel="13000000102" style="text-decoration:none;color:xxxxxx">13000000102</a></div>

6. The new version of Android uses the QQ browser X5 kernel reason, useragent will also contain mqqbrowser characters, but in the Micromessenger this identifier is still there. So use useragent to determine the current browser, such as the following

   qq browser:if(useragent.indexOf("MQQBrowser")!=-1 && useragent.indexOf("MicroMessagener")==-1){    console.log("this is QQ browser");}webchat browser:if(useragent.indexOf("MicroMessagener")!=-1){    console.log("this is webchat browser");}

8. Dynamic with JS set elements of the backgroundimage of a small pit, such as the CSS has been set to the element Div Background-image, and also set the Background-size

   div{    background-image:url(‘xxxxx.png‘);    background-size:320px;}

   Then because of business needs, need to use JS dynamic to change the background image of Div, this time background-size is not inherited, so if you change the background backgroundsize is not the default must be reconfigured.

10. The page JS dynamic Add the background image to the element, as in the following way

    var bg="";div.style.backgroundImage="url(‘"+bg+"‘)";

    If the path is a variable and it is possible to have an empty string, verify that if the empty string is passed to the URL, the request for the current page URL is repeated, and each DOM element has a BaseURI property that points to the URL of the current page.

    Another point here is, Background-image:url () This CSS property or in the JS design backgroundimage URL This method of the image path need to quote? The answer is to add, in two ways.

    5.1 Security Considerations . If it is not easy to be XSS because "" means a string ... But without quotation marks. If it's a URL ("HTTP://WWW.XSS.XSS"), the cookie may be leaked ...

    The 5.2 CSS specification requires quotation marks , and another problem is that when you use less, you might want to use less variables, and if you do not use the quotation marks when compiling a CSS file with LESSC, the. T variable is not compiled into the correct picture path.

    5.3 The final conclusion is that you should not set a null value for Background-img:url () and the SRC attribute of IMG, otherwise there will be one more useless request for the current URL.

12. About Windows.screen.height and window.innerheight (this piece can be described in more detail)

    Windows.screen.width

    Windows.screen.height

    Above these two properties most of the kernel represents the width of the current screen height

    But!!!!!! Android part of the model on this height is obviously inaccurate, can not guess how it is calculated.

    Then use Window.outerheight when you want the height of the screen, this property supports most browsers

    There is also a property of Window.innerheight, which does not contain the toolbar, the height of the scroll bar

14. About the rounding problem on Android

    Android tablet If you use border-radius:50% only on the parent container, there will be problems on some models, the picture will not be rounded, or the square will extend out of the parent window's fillet.

    Solution:

      div{border-radius:50%;    Overflow:hidden;    Border:0.5rem solid Rgba (0,0,0,0.8); Z-index:2;}    img{border-radius:50%; z-index:1;}  

    This problem does not have on iOS. If the picture circle has an outer border, be sure to place the bounding box on the parent container. If you put border and Border-radius all on the picture, the problem with some Android machines is that the picture is still not rounded, and the frame fits together into a circle.

16. Problems with each screen adaptation

    The common way to do screen adaptation is to CSS3 media query, the disadvantage of which is that the CSS code is redundant, and then the screen coverage for different sizes is not enough. For the code to be more concise, more convenient maintenance, so choose to use REM. iphone4 screen width as a standard, and then use JS to calculate the current screen suitable for 1rem=xx px.

    The code is as follows:

    var docuH = document.documentElement.clientHeight,    docuW = document.documentElement.clientWidth,    html = document.getElementsByTagName(‘html‘)[0];var num = docuW / 320;html.style.fontSize = 12 * num + "px";

    REM is the base of the HTML root node, REM is a relative unit rather than an absolute unit, and the HTML setting 1rem=xx px represents the default value for setting 1rem in the current CSS document stream.

    As for why to use the size of the iphone4 as a standard, this is not a standard, you can also use the Iphone6 screen width to do as the basis, depends on which size to use to do this 1rem standard. However, the personal recommendation to use the size of 320, because the mobile minimum font size is 12px (this is in most cases), if using Iphone6 to do 1rem standard, the result of iphone4 is 1rem will be less than 12px, Although most machines display 12px at less than 12px, the!!!!!!!!! I've met a font that shows less than 12px on an Android device. Fonts that are less than 12px on the mobile side have a significant impact on reading.

The sinkhole collection on each phone's browser