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默认按钮样式问题的更多相关文章

  1. 移动端App开发 - 02 - iPhone/iPad/Android UI尺寸规范

    移动端app开发 - iPhone/iPad/Android UI尺寸规范 本笔记抛去无用的前期分析什么的,全是干货,简洁干练 本笔记不单独针对 ios 或者 Android,两种都介绍,当然我们实际 ...

  2. iPhone、iPad默认按钮样式问题

    iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input ...

  3. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  4. 前端读者 | Web App开发入门

    本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...

  5. WEB APP 开发标签

    第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它 ...

  6. hybrid app开发中:苹果移动设备实用Meta标签

    hybrid app开发中:苹果移动设备实用Meta标签 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 具体效果如下: status-bar- ...

  7. 手机web app开发笔记

    各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...

  8. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  9. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

随机推荐

  1. 浅谈iOS中MVVM的架构设计与团队协作

    说到架构设计和团队协作,这个对App的开发还是比较重要的.即使作为一个专业的搬砖者,前提是你这砖搬完放在哪?不只是Code有框架,其他的东西都是有框架的,比如桥梁等等神马的~在这儿就不往外扯了.一个好 ...

  2. (二)list或set的遍历

    <@e.table class="tablelist questionlist" listAction="devide_check_list_batch.do&qu ...

  3. JavaScript 的原型对象 Prototype

    在 JavaScript 中,每当定义一个对象(或函数)时候,对象中都会包含一些预定义的属性,其中一个属性就是原型对象 prototype. var myObject = function( name ...

  4. MySQL订单分库分表多维度查询

    转自:http://blog.itpub.net/29254281/viewspace-2086198/ MySQL订单分库分表多维度查询  MySQL分库分表,一般只能按照一个维度进行查询. 以订单 ...

  5. EventBus的使用,初学EventBus传值

    一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...

  6. HDU 2013 蟠桃记

    蟠桃记 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  7. android学习日记25--ANR和Hander消息机制

    1.ANR(Application Not Responding)定义 在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个对话框称作应用程序无响应(ANR:A ...

  8. 5.6 在线DDL (online DDL)详解

    ONLINE ddl 原理: online ddl相关参数 测试原表数据是否能进行ONLINE DDL方法: online DDL 局限性 测试

  9. linux-insides-cn-BOOK

    https://www.gitbook.com/book/xinqiu/linux-insides-cn/details https://www.gitbook.com/book/looly/elas ...

  10. OAuth 2 Developers Guide--reference

    Introduction This is the user guide for the support for OAuth 2.0. For OAuth 1.0, everything is diff ...