Necessary compatibility problems and solutions in front-end H5 actual combat
The ios side is compatible with the input cursor height
The cursor of the input input box is displayed on the Android phone without any problem, but when the input is clicked on the iPhone, the height of the cursor is the same as the height of the parent box
Reason analysis:
Usually we are used to using the height attribute to set the height between lines and the line-height attribute to set the distance between lines (line height). When clicking input, the height of the cursor will automatically be the same as the height of the parent box. (The design principle of Google Chrome, there is another possibility that the height of the cursor is equal to the value of the line-height of the input when there is no content, and the cursor is from the top of the input to the bottom of the text when there is content
Solve：
The content of height and line-height is expanded with padding
.content {
float: left;
box-sizing: border-box;
height: 88px;
width: calc(100% - 240px);
.content-input {
display: block;
box-sizing: border-box;
width: 100%;
color: #333333;
font-size: 28px;
//line-height: 88px;
padding-top: 20px;
padding-bottom: 20px;
}
}
When sliding up and down on the ios side, it freezes and the page is missing
On the ios side, when sliding the page up and down, if the height of the page exceeds one screen, there will be obvious freezes, and some content on the page will not be fully displayed.
Reason analysis:
Generally speaking, the kernel of the WeChat browser, Android uses the built-in WebKit kernel, and iOS uses the built-in Safari kernel due to Apple's reasons, and Safari uses native controls to implement overflow-scrolling. For a webpage with -webkit-overflow-scrolling, a UIScrollView will be created and a sublayer will be provided for the rendering module to use
Solve：
Just add the following line of code in the public style
*{
-webkit-overflow-scrolling: touch;
}
The -webkit-overflow-scrolling property controls whether the element uses the scrolling bounce effect on mobile devices. auto: Use normal scrolling, when the finger is removed from the touch screen, the scrolling will stop immediately. touch: Use scrolling with a bounce effect, when the finger is removed from the touch screen, the content will continue to scroll for a while. The speed and duration of continued scrolling are proportional to the intensity of the scrolling gesture. Also creates a new stack context
But, this attribute has bugs. For example, if you have a node with absolute positioning set in your page, the display of the node will be messed up. Of course, there will be other bugs
The page cannot return to the original position when the ios keyboard is recalled after being awakened
Enter the content, the soft keyboard pops up, and the page content moves up as a whole, but the keyboard is put away, and the page content does not slide down
Reason analysis:
Fixed positioning elements. When the input box in the element is focused, the pop-up soft keyboard occupies the place. When the focus is lost, the soft keyboard disappears, but it still occupies the place. As a result, the input box cannot be input again. When the focus is lost, an event is given.
Solve：
<div class="list-warp">
<div class="title">
<span>Name</span>
</div>
<div class="content">
<input
class="content-input"
placeholder="Please enter your name"
v-model="peopleList.name"
@focus="changefocus()"
@blur.prevent="changeBlur()"
/>
</div>
</div>
changeBlur(){
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 200)
}
}
The Android pop-up keyboard covers the text box
Android WeChat H5 pops up the soft keyboard and blocks the input box
Solve：
Add a focus event to the input and textarea tags, as follows, first determine whether it is an operation under an Android phone, of course, you don’t need to determine the model, use the Document object properties and methods, setTimeout is delayed by 0.5 seconds, because calling the Android keyboard is a bit slow, As a result, if the processing is not delayed, the scrolling will fail
changefocus(){
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
if(isAndroid){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
document.activeElement.scrollIntoView();
}, 500);
}
}
Routing in Vue uses hash mode, and the sharing of ios is abnormal when developing WeChat H5 page sharing
(Routing in Vue uses the hash mode. When developing WeChat H5 page sharing, the sharing is set on Android successfully, but the sharing of ios is abnormal.) The current page of ios is shared with friends. It is normal to click to enter. If it is shared twice, it will jump to the home page ;When sharing after jumping to the second page using vue router, the sharing setting fails; the above Android sharing is normal
Reason analysis:
jssdk is signed by the back end and verified by the front end, but sometimes cross-domain, ios will automatically bring from=singlemessage&isappinstalled=0 and other parameters after sharing. But every time you get the url, you can't get the latter parameters
Solve：
You can change the page this.$router.push to jump to window.location.href instead of using routing jump, so that the address in the address bar is the same as the address of the current page, and can be shared successfully (suitable for sharing If there are not many pages)
Classic 1px border
Generally, pseudo-element simulation is used. The principle: remove the border of the original element, then use :before or :after to redo the border, and reduce the scale of transform by half. The original element is relatively positioned, and the newly made border is positioned absolutely
.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;
}
ios mobile phone fast scroll page stuck
Solve：
Use the better-scroll plugin to scroll the page
transform causes z-index to fail
Solve：
1. Parent, any parent, non-body level, setting overflow:hidden can restore the same rendering as other browsers.
- Element set transform: translateZ(120px).
300ms delay problem on the mobile terminal
Reason analysis:
Historical burden problem: In the past, websites were designed for large-screen computers. Previewing on mobile phones would cause the content to be shrunk. To solve this problem, it was agreed to double-click the screen to zoom in and out the webpage in equal proportions. How to judge whether the user double-clicked Woolen cloth? Then wait 300 milliseconds after the first click to determine whether the user clicked the screen again, and if it is clicked, it is judged to be a double-click. This is the main reason for the aforementioned 300 ms delay
Solve：
1.Add the following meta tags at the head of the HTML document, adding user-scalable=no will prohibit zooming
<meta name="viewport" content="width=device-width,user-scalable=no">
2.CSS touch-action property
html {
touch-action: none
}
3.(It is not recommended to use, the author has explained in github, and there will be a problem that the focus of the input box on the ios mobile phone is not sensitive) Use fastclick.js, which is a lightweight library file. After we import the library file, just add the following code
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
