ios, Andrews distal compatibility

1. Date compatibility

Solution (see my previous article)
Andrews, ios time conversion in the form of a time stamp

2.input frame Focus, iOS outline or shading occurs, the normal display Andrews

Solution

input:focus{outline:none}
input:{-webkit-appearance: none;}

3. With regard to flex layout

Workaround
flex layout for a lower version of Android, do not support the flex-wrap: wrap property, but the property ios system support wrap, this time how to solve it? Of course, it is not a line feed.
If you must use to change the layout of the line, it is wrapped in a large outer div, and then set several small div, div layout are each small flex (but does not wrap oh); (I hope you can understand my meaning, if you do not understand, you can leave a message at the bottom, I will make answer in real time)

4.ios system will be digital as a phone number, cause discoloration

Solution

<meta name="format-detection" content="telephone=no"> 
<meta http-equiv="x-rim-auto-match" content="none">

The above code is added to the <head> tag

The identification is prohibited email Andrews

Solution

<meta content="email=no" name="format-detection" />

The text placeholder 6.input property causes the positional deviation

Solution

line-height: (input frame and the height as high) --- PC terminal Solution 
Line -height: Normal movement end Solution ---

7.input type = after the number, pc end of the up and down arrows appear

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

8. Prohibition Published - part of the Android phones will enlarge Click on the image, such as the need to prohibit amplification, only need to set css properties

img{ 
    pointer-events: none; 
}

The img tag will fail click event, if you want to add to the picture click event would write to the above layer

9. Prohibition page zoom

Such systems are provided ios10 failure, if desired scaling ios prohibited, the following code is useful for pro-test

window.onload=function () { 
      禁止双击放大 
      document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd = now;   
        }, to false ); 
      prohibited gesture enlarged 
      document.addEventListener ( 'gesturestart', function (Event) { 
         the event.preventDefault (); 
      }); 
}

10. Under some circumstances, such as non-clickable elements (label, span) listen for the click event does not fire in IOS, css increase cursor: pointer to get (not tested)

11. Caton pull the scroll bar up and down, slow (not tested)

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

Android3 + and iOS5 + CSS3 support a new property for overflow-scrolling

Epilogue

Compatible with the above, are encountered in the development, according to personal experience, these methods are feasible, if the situation can not be resolved, please according to their own condemnation wow!
Compatibility may not be complete, since if there are other situations encountered, I will Cipian after completion of the article;