Mobile-side development compatibility issues

Web front-end development, in addition to the PC browser compatible browser, mobile page Zho Duan and iOS page compatibility is also a lot of problems are confusing and annoying, today I come to summarize 10 common compatibility problems, for everyone to study under the test.

1, iOS Input Settings Type=button property disabled set True, the style text and background anomalies will occur, using Opacity=1 to solve

2, some cases of non-clickable elements such as (Label,span) monitoring Click events, will not be triggered under iOS, CSS added cursor:pointer will be done

3, 1px frame problem use

xx: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 for fixed positioning in iOS bug problem, click Focus Input, input jump to the middle, you can use the Content scroll box is also fixed to set

5, the mobile font is less than 12px using four-week frame or background color block, Android text on the bug, you can use the overall magnification 1 time times scale, and the font is not odd

6, in the mobile image upload pictures using accept= "image/*" multiple, compatible with low-end machine problems

7, in the H5 embedded app, iOS if the vertical scroll bar appears, the finger began to scroll the page, scrolling quickly stop, like the side of the brakes, there is "rolling very hard" feeling self.webView.scrollView.decelerationRate = Uiscrollviewdecelerationratenormal WebView set a lower "deceleration rate" for the

8. Click 300ms Delay Response using Fastclick

Window.addeventlistener ("Load", function () {

Fastclick.attach (document.body);

}, False);

9, input has the placeholder case does not set the line height, otherwise will be biased on

10, mobile adapter can use Lib-flexible

Mobile-side development compatibility issues