web app开发中 iPhone、iPad默认按钮样式问题

webapp开发过程中，用html5+css3很方便，而且可以很方便的编译到Android ios等不同平台，但是ios需要单独处理一下，不然会出现一些想象不到的问题。下面就介绍一下各种问题的解决方法

方法/步骤

1.  

   iPhone、iPad默认按钮样式问题

   解决方法给按钮元素添加一个-webkit-appearance: none;具体代码

   input[type="button"], input[type="submit"], input[type="reset"] {

   -webkit-appearance: none;

   }

2.  

   隐藏Safari用户栏

   为了更加像原生应用，我们还可以对Safari的用户栏和地址栏进行隐藏，这个叫作standalone模式，加入以下meta进入此模式：

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

3.  

   Icon

   iOS所用的icon是png格式的，其提供了apple-touch-icon和apple-touch-icon-precomposed两种icon，使用方式如下：

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

   　　

4.  

   数字禁止转换为电话号

   <meta name=”format-detection” content=”telephone=no” />
   

   　　

5.  

   删除默认的苹果工具栏和菜单栏

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

   　　

6.  

   控制状态栏显示样式

   <meta name=”apple-mobile-web-app-status-bar-style” content=”default” />默认样式
   <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />黑色
   <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />透明