IPhone, ipad default button style issues in web App development

WebApp development process, with HTML5+CSS3 is very convenient, and can be easily compiled to Android iOS and other platforms, but iOS need to deal with it alone, or there will be some imagined problems. Here's a look at the solutions to various problems

Method/Step

2. IPhone, ipad default button style issues

   Workaround add a-webkit-appearance:none to the button element; specific code

   Input[type= "button"], input[type= "Submit"], input[type= "reset"] {

   -webkit-appearance:none;

   }

4. Hide Safari User Bar

   To be more like native apps, we can also hide the Safari's user and address bars, called standalone mode, and add the following meta into this mode:

   <meta name= "apple-mobile-web-app-capable" content= "yes"/>

6. Icon

   The icon for iOS is in PNG format, which provides the Apple-touch-icon and apple-touch-icon-precomposed two icons, using the following methods:

   <link rel= "Apple-touch-icon" href= "/apple-touch-icon.png"/>

   <link rel= "apple-touch-icon-precomposed" href= "/apple-touch-icon-precomposed.png"/>

8. Digital disable conversion to phone number

   <meta name= "format-detection" content= "Telephone=no"/>

10. Delete the default Apple toolbar and menu bar

    <meta name= "apple-mobile-web-app-capable" content= "yes"/>

12. Control the status bar display style

    <meta name= ' apple-mobile-web-app-status-bar-style ' content= "default"/> Default style <meta name= " Apple-mobile-web-app-status-bar-style "content=" Black "/> <meta name=" Apple-mobile-web-app-status-bar-style "content=" black-translucent "/> Transparent

IPhone, ipad default button style issues in web App development