In the past, when I was working on the PC side, I would also encounter compatibility issues, but to be honest, all I had in my mind were IE problems, and there was nothing to pay special attention to. Maybe it was because I was not good at summarizing. Now I am working on the mobile side (originally I thought the mobile side was very easy, so I didn’t take it seriously), so, I was wrong, I paid for my contempt and arrogance!
Recently, I encountered some compatibility bugs and found information on the Internet.
Let’s talk about viewport first
Template first
<meta charset=utf-8><!--The main purpose is to force the width of the document and the device width to remain 1:1, with a maximum width of 1.0, and to prohibit screen scaling. --><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, allowing full-screen browsing. --><meta content=yes name=apple-mobile-web-app-capable><!--The private label of iphone, the style of the status bar at the top of iphone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Disable automatic recognition of numbers as phone numbers. This is more useful, because a string of numbers will be displayed as Blue, style additions to other colors are also ineffective. --><meta content=telephone=no name=format-detection><!--Disable email recognition--><meta content=email=no name=format-detection>
It is best to add top left or 0 0 when writing background images, otherwise it is easy to jump when writing motion effects.
Copying and selected text are prohibited
.el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;}There is a bug in the fixed positioning of Apple mobile phones. Check whether overflow-x:hidden is set in the html and body;
Set special styles for mobile phones with different screen sizes
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}The support for the input keyboard events keyup, keydown, and keypress in IOS is not very good. It is possible to use input to monitor the keyboard keyup event in the Android mobile browser. However, after inputting using the input method in the iOS mobile browser, the keyup does not respond immediately. Events can only be responded to after deletion
Method: You can use the oninput event of html5 to replace keyup
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /script>Setting the input button style on iOS will be overridden by the default style
The solution is as follows:
input,textarea { border: 0; -webkit-appearance: none;}Flex layout does not support the flex-wrap:wrap attribute for lower versions of Android, but the iOS system supports the line wrap attribute. How to solve this problem? Of course, do not use line breaks and use other methods instead.
.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+ */}The placeholder attribute of input will position the text upward
line-height: (same height as the input box) ---PC solution
line-height: normal ---Mobile solution
After input type=number, up and down arrows appear on the PC side
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0;}Enable Android and iOS mobile phones to open the camera and select the photo 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( ); //Determine whether it is an Apple phone, if so it is true var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture); };})The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.