Mobile compatibility summary. New issues will be continuously updated
background
In the last six months, I have been working on mobile TERMINAL H5, mainly in wechat and WebView in app. During this period, I encountered many compatibility problems with different systems and devices. I hope to compile a collection here for easy searching in the future. Of course, if you also happen to encounter the same problem, I hope to help you.
1. Audio and video problems
Why put it at the beginning, because there are a lot of compatibility problems with audio and video
Automatically play
ios safari
Not supported in iPhone Safari, but can be enabled in WebView. The iOS development documentation clearly states that autoplay is not allowed on cellular networks;- In Chrome, Settings
mouted
Then it can play automatically - Automatic play is not allowed in wechat. But with the help of
WeixinJSBridge
implementation
Singleton problem
Audio objects in ios Safari are singletons, and you can’t play multiple audio files in ios
Loop for
Some ios models do not support loop playback
Solution: Listen to the ended event and manually trigger the playback
<! doctype html><html>
<head>
<title>Looping Audio</title>
<script type="text/javascript">
function init() {
var myAudio = document.getElementById("audio");
myAudio.addEventListener('ended', loopAudio, false);
}
function loopAudio() {
var myAudio = document.getElementById("audio");
myAudio.play();
}
</script>
</head>
<body onload="init();">
<audio id="audio" src="myAudio.m4a" controls></audio>
</body>
</html>
Copy the code
video
- Preload is not supported on ios. The common way to do this is with video
play()
Stop immediately after - Ios Video Automatic full screen play: Set the inline attribute
playsinline webkit-playsinline
2. Poster generation -html2Canvas
In marketing scenarios and fission, we need to share part of the page content as an image. Most of the time
html2Canvas
If it is just a simple QR code and poster image, it is recommended to use drawImg directly instead of using this plugin
2.1 Cross-domain images
Solution: Set useCORS to true
html2canvas
To provide theproxy
plan
await html2canvas(eleImgBox, {
// If the requested image itself supports cross-domain requests (back-end Settings may be required)
proxy: 'https://aliyun-oss.61info.cn'
})
Copy the code
- Nginx does domain forwarding
- Like qr codes, consider Base64 images
3. Classic 1px border
Pseudo-element simulation is generally adopted. Principle: Remove the border of the original element, and then use :before or :after to redo the border and reduce the scale by half. The original element is positioned relative to the new border.
.scale{
position: relative;
border:none;
}
.scale:after{
content: ' ';
position: absolute;
bottom: 0;
background: # 000;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: 0 0;
}
Copy the code
For specific methods, see:
Some understanding and solutions about developing 1px border on mobile terminal
4. Android, border-radius:50% not round
Specifically, because rem layout is used, in some models of the problem, set the specific PX value, not 50%
5. In Android, line-height is not in the middle
Solution: Source Internet
- Set the inside and outside margins of the font size to twice the required size and scale using transform. (Not applicable)
- Set the inside and outside margins of the size to 2 times the required size, using zoom, you can solve the problem perfectly. (can)
- Set line-height to 0 and use padding to spread the elements out.
Specific reason: Why line-height deviates from the vertical center in Android browser
6. Android version input placeholder is too high
Set line-height for input to normal
input{
line-height:normal;
}
Copy the code
Answer on StackOverflow:
HTML5 placeholder css padding
7. The body setting on ios overflow: Hidden can still scroll
Wrap a big box around the outermost layer of all elements
.wrap{
position:relative;
overflow:hidden;
}
Copy the code
Stackoverflow has several options for handling stackOverflow:
Does overflow:hidden applied to work on iPhone Safari?
8. Ios doesn’t scroll smoothly
After using the Absolute layout, ios will find that scrolling within elements is not smooth. When the sliding finger is released, scrolling immediately stops and the original smooth scrolling feature is lost. Baidu the elastic scroll problem, found in WebKit, the following properties can restore elastic scroll.
-webkit-overflow-scrolling: touch;
Copy the code
9. Ios fixed problem
This is a common layout, but with ios fixed will not work when the keyboard is up. The solution is in the following article:
Fixed Web mobile terminal layout solution
Change page scrolling to in-container scrolling.
10. Understand the question
Also talk about touch events and click penetration
The fastclick.js library comes to mind first, but see this article for details on whether you really need it
FastClick calls Event.preventDefault in the TouchEnd phase and creates a MouseEvents with Document.createEvent, And then through the eventTarget. DispatchEvent trigger the corresponding target element binding on the click event
11. The keyboard blocks the input box
Solutions are as follows:
Mobile Web page, input get focus when pop-up system virtual keyboard, block input, solution?
12. Slide on the floating layer, and the page below the floating layer also scrolls
Floating scrolling on the Web mobile side prevents window forms from rolling JS/CSS processing
Set overflow values when floating layers appear and hide
13. Ios date conversion NAN issue
In ios, new Date(‘2020-11-12 00:00:00’) will be NAN
Reject solution: Use new Date(‘2020/11/12 00:00:00’) Date format, or write a regular conversion
14. The animation stops while ios is scrolling
Better Scroll is recommended for lazy mobile users, which is a good plug-in
Why CSS3 animation stops on ios because of page scrolling?
15. Hold down and blink back
element {
-webkit-touch-callout:none;
}
Copy the code
16. Do not recognize digits as telephone numbers
<meta name = "format-detection" content = "telephone=no">
Copy the code
17. The transition of the splash screen
.box {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
Copy the code
18. CSS3 animation stuck
Use the transform as far as possible, avoid to use the height, width, margin, padding, etc. GPU hardware acceleration can be enabled, but use hardware acceleration should also be careful, because this also has a pit, improper use will make the application more and more jammed!
CSS3 hardware acceleration also has a pit
19. margin bottom
This is a typical bug that you can solve by using the padding-bottom option.
20. Scroll animation
Juejin. Cn/post / 689701…
21. iphoneX
const isIphonex = () => { // X XS, XS Max, XR const xSeriesConfig = [ { devicePixelRatio: 3, width: 375, height: 812, }, { devicePixelRatio: 3, width: 414, height: 896, }, { devicePixelRatio: 2, width: 414, height: 896, }, ]; // h5 if (typeof window ! == 'undefined' && window) { const isIOS = /iphone/gi.test(window.navigator.userAgent); if (! isIOS) return false; const { devicePixelRatio, screen } = window; const { width, height } = screen; return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height); } return false; }Copy the code
22. The moving end slides through
The content of the pop-up is obviously longer than the screen, so you need to slide the content of the pop-up, but do not slide the home page
<script type="text/javascript">
// Solve the mask layer roll penetration problem, respectively after the mask layer ejected and before closing
const ModalHelper = ( (bodyCls) = >{
let scrollTop;
return {
afterOpen: function () {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('dialog-open');
</script>
body.dialog-open {
position: fixed;
width: 100%;
}
Copy the code
Principle: When pop-up box, make the background home page content as a fixed location, so that the page sliding has no impact on it, close the pop-up box enable, remove the fixed location of the class name, return to normal
PS: Welcome to exchange and study, please point out any shortcomings.