码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-05-03 22:10:29      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/colq/p/5456588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!