1. Date Compatibility
Under Android

Date.parse(new Date('2018-03-30 12:00:00'))

Under ios system

Date.parse(new Date('2018-03-30 12:00:00'))

Conversion is not possible.
Solution (compatibility writing)

Date.parse(new Date('2018/03/30 12:00:00')) || Date.parse(new Date('2018-03-30 12:00:00'))

Encapsulate as a tool function

function formatTimeStamp (time) {
  return Date.parse(new Date('2018/03/30 12:00:00')) || Date.parse(new Date('2018-03-30 12:00:00'))
}

2.input box focused, ios outline or shadow, Android display normal
Solution

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

viewport

<meta charset="utf-8">
<!--The main I is to force the width of the document to be 1:1 and the maximum width to be 1.0, preventing screen zooming.-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--This is also an iphone private label that allows full screen browsing.-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--The private label of the iphone, the style of the top status bar of the iphone.-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--Prevents numbers from being automatically recognized as phone numbers, which is useful because a string of numbers appears blue on the iphone and styles that add other colors do not work.-->
<meta content="telephone=no" name="format-detection">
<!--Disable email recognition-->
<meta content="email=no" name="format-detection">

4. About flex layout
The flex layout does not support the flex-wrap:wrap attribute for lower versions of Android, but the ios system supports the wrap attribute. What can I do at this time?Of course, instead of using line breaks, use other methods.

.box{
    display: -webkit-box; 
    /* Old version syntax: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* Old version syntax: Firefox (buggy) */
    display: -ms-flexbox; /* Mixed version syntax: IE 10 */
    display: -webkit-flex; /* New version syntax: Chrome 21+ */
    display: flex; /* New version syntax: Opera 12.1, Firefox 22+ */
}

5. The placeholder property of input will skew the text up

line-height:(as high as the height of the input box)--pc-side solution
 line-height:normal--mobile solution

6. Up and down arrows appear on the pc side after input type=number

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

7. ios setting input button style will be overridden by default style
The solutions are as follows:

input,textarea {
  border: 0;
  -webkit-appearance: none;
  }

8. Implement android and ios system mobile phone to turn on camera and select album function

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>


$(function () {
    //Get the browser's userAgent and convert it to lowercase
    var ua = navigator.userAgent.toLowerCase();
    //If it's an Apple phone, it's true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

9. Failure of HTML5 audio autoplay on mobile side
This is not a BUG. Because automatic playback of audio or video from web pages can cause some confusion or unnecessary traffic consumption to users, both Apple and Android systems usually prohibit automatic playback and triggered playback using JS, which must be triggered by the user to play.

Solution ideas: Touch start by user to trigger playback and pause (audio starts loading, then JS is fine).

Resolution Code:

document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

10. With regard to iOS systems, when Chinese Input Method is used to enter English, a one-sixth space may appear between the letters.

this.value = this.value.replace(/\u2006/g,'');

11. About the optimization of iOS and OS X-side fonts (inconsistencies in font boldness between horizontal and vertical screens, etc.)
IOS browsers reset the font size when they display a horizontal screen. Setting text-size-adjust to none can solve problems on iOS, but the font scaling feature of desktop Safari will fail, so the best solution is to have text-size-adjust of 100%.

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

12. Moving Endpoint Perspective
Examples are as follows:

<div id="haorooms">Node Event Test</div>
<a href="www.baidu.net">www.baidu.com</a>

The div is an absolutely positioned mask, and the z-index is higher than a.And the a tag is a link in the page where we bind tap events to div

$('#haorooms').on('tap',function(){
    $(this).hide();
});

The div normally disappears when we click on the mask, but when we click on the mask on the tag a, we find that the link a is triggered, which is called a point through event.

Reason:

Touch start is earlier than touch end is earlier than click.That is, click triggering is delayed, which is about 300 ms. That is to say, after tap triggering, click has not been triggered at this time. After 300 ms, due to the hidden layer, our click triggered on the following a link.
Solve:
1. Replace click events with touch events whenever possible.For example, use touchend events (recommended).
2. Use fastclick https://github.com/ftlabs/fastclick
3. Block a tag click with preventDefault
4. Delay a certain amount of time (300ms+) to handle events (not recommended)
5. The above can be generally solved, but it is really not possible to change to click events.

The touchend event is described below, as follows:

$("#haorooms").on("touchend",function(event) {
   event.preventDefault();
 });

13. Some Android phone corners are invalid
Solution: background-clip: padding-box;

14. How to define font-family on the mobile side

Use system default for Chinese fonts and Helvetica for English
/*Code for defining fonts on the mobile side*/

body{font-family:Helvetica;}

15. Font unit font-size on mobile side choose px or rem
Use px if only a few mobile devices need to be adapted and the resolution has little effect on the page

For devices that need to be adapted to a variety of mobile devices, use rem, such as devices that require only a large resolution difference such as the iPhone and iPad

rem configuration reference for 640px width visual manuscripts:

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

16. Can the color value of the webkit form input box placeholder be changed?

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

17. Events and styles of screen rotation

Event

window.orientation，Value: positive and negative 90 means horizontal mode, 0 and 180 are vertical mode;
window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("Horizontal Screen:" + window.orientation);
        case 0:
        case 180:
        alert("Vertical screen:" + window.orientation);
        break;
    }
}  

//Style used when upright screen
@media all and (orientation:portrait) {
.css{}
}

//Style to use for horizontal screen
@media all and (orientation:landscape) {
.css{}
}

18,fixed bug

Fixed element under ios is easy to locate incorrectly, affecting fixed element location when soft keyboard pops up
Fixed works better with android than with iOS, and it does not affect fixed element positioning when the soft keyboard pops up
Position is not supported under ios4:fixed

Solution

isroll.js is available, no perfect solution yet

19. flex layout

flex Layouts are currently available for mobile use and not all syntax is fully compatible
/* ============================================================
   flex: Define Layout as Box Model
   flex-v: Box Model Vertical Layout
   flex-1: Subelements occupy the remaining space
   flex-align-center: Vertical centering of child elements
   flex-pack-center: Horizontal centering of child elements
   flex-pack-justify: Align child elements at both ends
   Compatibility: ios 4+, android 2.3+, winphone8+
   ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

20. Under ios, cancel the default capitalization of the first letter of input in English

<input autocapitalize="off" autocorrect="off" />

21. Cancel input voice button under android

input::-webkit-input-speech-button {display: none}

22. CSS animation page whites, animation carton
Solution:
1. Use the synthetic properties transform and opacity to design CSS3 animations whenever possible, instead of left and top for position ing
2. Turn on hardware acceleration

  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

23. Compatibility handling of calc
Cal variables in CSS3 must be prefixed with -webkit-in iOS6 browsers. Current FF browsers do not need-moz-prefix.
Android browsers still do not support calc, so add a conservative size before:

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}