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

时间: 2024-10-25 21:11:53

web app开发中 iPhone、iPad默认按钮样式问题的相关文章

前端读者 | Web App开发入门

本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Native App的争论已有一段时间,而Hybrid混合App则受到推荐,随着时间的推移,我们相信Web App也会有一定的市场,那么它到底有什么奥秘呢?让我们来看看. Web App与Native App有何区别呢? NativeApp 开发成本非常大.一般使用的开发语言为JAVA.C++.Objecti

web app开发技巧总结

Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta http-equiv="Cache-Control" content="no-siteapp" /> 相关链接:SiteApp 转码声明 2.添加到主屏后的标题(IOS) <meta name="apple-mobile-

WEB APP 开发标签

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览: 第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式: 第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码 <meta content=”width=device-width, initial-scale=1.0,

web app开发——使用jQuery Mobile创建餐厅订餐应用

从零开始创建移动Web应用需要编程者学习专门的移动编程知识技能,还要有比如专门的编码工具(比如专门为iOS系统开发应用的工具),再有就是需要在每一个平台都进行测试部署(如Andr??oid,iOS,BlackBerry,Windows Mobile等). 这样的话,开发移动应用将花费不少,而另一个解决方案是再使用HTML,CSS,Javascript,它们的特点是跨平台和跨设备.此外,目前已 经出现了不少专为移动web应用开发的专门框架,比如jQuery Mobile.jQuery Mobile

Native App开发 与Web App开发(原生与web开发优缺点)

Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素.数据内容.逻辑框架均安装在手机终端上. Web App开发 Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份

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

背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeout/setInterval CSS3 Transition/Animation HTML5 Web Database postMessage Web Workers Web Sockets and more… 后面几个是CSS3 HML5加入的新API.这些接口都是会产生异步的操作 比如本人的一个

app开发中整理需求的重要性

专业App开发公司经验之谈:app开发中需求整理是非常重要的一部分,而产品经理的角色就更为重要,要主导整个产品需求整理与整合.所以经验丰富的产品经理往往做这些事情时没有那么困难,但是如果是新手的话可能会犯以下的这些错误: 1.产品需求的真伪应如何鉴别? 往往开发一款产品会接到很多部门的需求,业务部门.老板.测试部门都可能会反馈到某某功能需求,而很多人的思维是怎么能完成这些需求,这里广州品向科技要提醒的是:如果有部门提出需求,那么还请站在产品的角度来看一下,这些需求是否都要满足! 2.表面需求已经

web app 开发必不可少的滑动插件 Flipsnap

flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android,win phone7 ie9+)外还兼容 PC 版的谷歌和Safari等. 演示地址:http://pxgrid.github.io/js-flipsnap/demo.html web app 开发必不可少的滑动插件 Flipsnap,布布扣,bubuko.com

error items-9022:missing required icon file.the bundle does not contain an app icon for iPhone/iPad Touch of exactly &#39;120x120&#39; pixels,in.pen format for ios versions &gt;= 7.0

error items-9022:missing required icon file.the bundle does not contain an app icon for iPhone/iPad Touch of exactly '120x120' pixels,in.pen format for ios versions >= 7.0 最近提交itunesconnect应用时,有个警告说缺少120x120图标 以下是本人解决方法: 添加Icon_120x120.png-->.plist添