服务咨询热线

400-800-5770
网站首页 > 新闻资讯 > 行业热点

html中单色按钮在苹果手机上显示渐变色处理方法

2015-09-16 10:31:52 宇牛网络 阅读

在开发手机网站或H5 APP的过程中会发现在IOS手机上按钮会变成渐变色,下面小编就介绍一下解决方法:

iPhone、iPad默认按钮样式问题

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

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

 

隐藏Safari用户栏

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

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

 

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"/>

 

数字禁止转换为电话号

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

 

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

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

 

控制状态栏显示样式

<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” />透明