There are only a few cases where you need to judge the operation and basically write it normally.
Compatibility problems are not so common by themselves that everyone remembers a few interviews and asks them. What if the interviewer does not understand? I haven't met this is normal
Compatibility issues are different in many versions, and Android and ios are also different. If we meet, we will go to Baidu to solve it. If you interview, remember a few
1 How to judge whether it is Android or ios**
//Get the userAgent of the browser and convert it to lowercase
var ua = navigator.userAgent.toLowerCase();
//Determine whether it is an Apple phone, if it is true
var isIos = (ua.indexOf('iphone') !=- 1) || (ua.indexOf('ipad') != -1);
if(isIos){
make iPhone compatible
}else{
make Android
}
2 Compatibility issues
1. Forbidden to click on the picture to enlarge. Some Android phones click on the picture to enlarge. If you need to prohibit the enlargement, you only need to set the css property
img{
pointer-events: none;
}
This will invalidate the click event of the img tag. If you want to add a click event to the image, write another layer on it
2. Prohibit iOS from recognizing long strings of numbers as phones
<meta name="format-detection" content="telephone=no">
3. Prohibit copying and selecting text
Set CSS property-webkit-user-select:none
4. In some cases, monitoring click events for non-clickable elements such as (label, span) will not be triggered under IOS, and the addition of cursor: pointer in css will fix it. 5. Stuttering and slow when scrolling up and down
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
Android3+ and iOS5+ support the new CSS3 property overflow-scrolling
6 Android will not automatically play video
Android autoplay has no effect, you need to manually trigger
window.addEventListener('touchstart', function(){
audio.play(); // You need to actively call js to play the video
}, false);
7. Change the translucent mask layer to full transparency
On ios, when a link is clicked or an element bound with a click event through js, a translucent background will appear. When the finger leaves the screen, the gray background disappears and a "splash screen" appears
html, body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}