首页 > 移动平台 > 详细

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

时间:2016-05-03 22:09:40      阅读:240      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!