ios common compatibility issues
1. Use the disable selected text attribute
input {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
In this way, the input box of ios will have a disability problem (cannot input content), and you need to add another attribute to it
input {
-webkit-user-select: auto;
}
2. The input event and change event of the form
After ios11, in some cases, the input method that comes with ios is used for the input event. When selecting pinyin input, multiple characters will be automatically input. This is because sometimes ios is not compatible with the input event. This problem can be solved by using the change event.
When ios closes the input method, it will lose the focus and trigger the change event, but Android will not lose the focus when the input method is closed, so you can use different events for different systems by judging the UA
3. Compatibility of line-height height
The browser performance for general PC browsers and iOS devices is the centering effect we want, but the browser text of most Android devices will deviate slightly upwards,
Tests have shown that when the font size is twice the odd number (such as 10px, 14px, 18px, 22px, 26px), there will be serious offsets. In fact, the difference in effect between systems is related to our font type, system typesetting engine, and browser. In fact, it does not affect the user's browsing and operation experience. We can ignore these problems. The two processing schemes mentioned below can be used. Scheme 1: We can handle it through transform: scale. For example, if the font size is 8px, we set the font to 16px, and then scale it to double the size through scale(0.5), which is simple and crude. Note: Twice the magnification will cause the container to be propped up. Option 2: Combined with the relationship between line height and alignment, combined with the black technology derived from pseudo elements, the pro-test effect is ideal.
.jd::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-top: 1px;
}