1. In ios, if the input is set to true for type=button attribute disabled, there will be problems with style text and background abnormalities.
Solution: use opacity=1 to solve
2. The click event is monitored for non-clickable elements such as (label, span), and it will not be triggered under some ios versions.
Solution: add cursor: pointer to css and it will be done
3. 1px border on mobile
Solution: For example, the class of the button box is btn
.btn:before{
content:'';
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
width: 200%;
height: 200%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
4. Input is fixed positioning. Input is fixed at the top or bottom under ios. After scrolling some distance on the page, click input (pop-up keyboard), and the input position will appear in the middle position.
Solution: The content list box is also fixed positioning, so that there will be no fixed misalignment problem
5. The mobile font is smaller than 12px and uses the surrounding border or background color block, and some Android texts are on the wrong side of the bug.
Solution: You can use the dpr times (width, height, font-size, etc.) of the overall screen to enlarge the screen and then use transform to zoom, and the use of canvas will blur on the mobile side. This solution is also needed
6. The problem of compatibility with low-end devices when uploading pictures on the mobile terminal.
Solution: input add attribute accept="image/*" multiple
7. In the h5 embedded app, if there is a vertical scroll bar on ios, the scrolling stops quickly after sliding the page with your finger, as if you are driving on the brakes, and you have a feeling of "scrolling hard".
solution:
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal; set a lower "deceleration rate" for webview
8. Click 300ms delay response on mobile terminal
Solution: use Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
9. The line height of the placeholder text setting on the Android machine will be higher
Solution: Do not set the line height when the input has a placeholder
10. Overflow: scroll, or auto sliding and freezing on iOS
Solution: add -webkit-overflow-scrolling: touch;
11. The problem of image compression and preview upload on the mobile terminal
12. For mobile terminal adaptation, you can use lib-flexible https ://github.com/amfe/lib-f..., using rem to layout the mobile terminal has a problem with the decimal point of px. Different mobile phones do not handle the decimal point. The same, some are rounded, some are directly discarded, so when the Sprite image is automatically generated, a space of 2px is appropriately left around the icon to prevent the icon from being cropped.
13. Adapted solutions for iphonex
<meta name="viewport" content="...,viewport-fit=cover" />
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}