Understanding Meta

<meta charset="utf-8"> <! -- Main I enforces document width 1:1 to device width, maximum width 1.0, and no 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 TAB that allows full screen viewing. --> <meta content="yes" name="apple-mobile-web-app-capable"> <! -- iPhone private TAB, the style of the status bar at the top of the iPhone. --> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <! -- Disables automatic identification of numbers as phone numbers. This is useful because a string of numbers will appear blue on the iPhone, and style additions won't work either. --> <meta content="telephone=no" name="format-detection"> <! <meta Content ="email=no" name="format-detection">Copy the code

Disallow copying or selecting text

  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
Copy the code

Input keyboard events keyup, keyDown and keypress are not well supported in IOS. Listening for keyboard keyup events with input is ok in Android mobile browser, but the corresponding keyup event does not immediately correspond to input method in IOS mobile browser. Methods can only be responded to after deletion: instead of keyUp, you can use html5 onInput events

<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>
Copy the code

The ios Settings input button style is overridden by the default style

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

Flex-wrap :wrap is not supported on earlier versions of Android, but ios does support the line wrap attribute. Instead of using a line break, use something else.

.box{ display: -webkit-box; /* Older syntax: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* Old version syntax: Firefox (buggy) */ display: -ms-flexbox; Display: -webkit-flex; Display: flex; display: flex; /* New version syntax: Opera 12.1, Firefox 22+ */Copy the code

The input placeholder attribute will skew the text up

Line-height: normal -- Mobile solutionCopy the code

Android and ios mobile phone to open the camera and can choose the album function

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/> $(function () { / / browser userAgent, and translated into lowercase var ua. = the navigator userAgent. ToLowerCase (); Var isIos = (uA.indexof (' iPhone ')! = -1) || (ua.indexOf('ipad') ! = 1); if (isIos) { $("input:file").removeAttr("capture"); }; })Copy the code

Mobile HTML5 Audio autoplay failure

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

Solutions to the problem of ios bangs:

Copy the code

Restrict the page body content to a security zone

    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}
Copy the code

The solution to android bangs, water drops and other problems is defined in the public style:

// Ios top set aside 20px height. Havetop {.my-header {padding-top: 20px; } .content { padding-top: 20px; } } .isios { .my-header { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } .content { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } } <script> window.onload = function () { document.getElementById('app').classList.add('havetop'); if (/iPhone/.test(navigator.userAgent)) { document.getElementById('app').classList.add('isios'); } } </script>Copy the code

Note: The page header (.my-header) specifically used is non-positioning, and the body part (.content) is absolute positioning, as shown in the figure:

Some android models with high status bars have partially covered heads. Here you can use the above judgeBigScreen method to determine whether it is a full screen of Android. If it is a full screen, increase the padding value of the head and main part appropriately:

Function judgeBigScreen() {function judgeBigScreen() {var result = false; var rate = window.screen.height / window.screen.width; var limit = window.screen.height == window.screen.availHeight ? 1.8, 1.65; . / / / / critical value window screen. The height of the screen height / / window screen. AvailHeight to the browser The available height if (rate > limit) {result = true; } return result; } window.onload = function () { document.getElementById('app').classList.add('havetop'); if (/iPhone/.test(navigator.userAgent)) { document.getElementById('app').classList.add('isios'); } else {// Let judgeFullScreen = judgeBigScreen(); if (judgeFullScreen) { document.getElementById('app').classList.add('isFullScreen'); } } } </script> .isFullScreen { .my-header { padding-top: 30px; padding-top: 30px; } .content { padding-top: 30px; padding-top: 30px; }}Copy the code

The effect is shown below: