web app开发中 iPhone、iPad默认按钮样式问题
webapp开发过程中,用html5+css3很方便,而且可以很方便的编译到Android ios等不同平台,但是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” />透明
web app开发中 iPhone、iPad默认按钮样式问题的更多相关文章
- 移动端App开发 - 02 - iPhone/iPad/Android UI尺寸规范
移动端app开发 - iPhone/iPad/Android UI尺寸规范 本笔记抛去无用的前期分析什么的,全是干货,简洁干练 本笔记不单独针对 ios 或者 Android,两种都介绍,当然我们实际 ...
- iPhone、iPad默认按钮样式问题
iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input ...
- 微信公众平台开发:Web App开发入门
WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...
- 前端读者 | Web App开发入门
本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...
- WEB APP 开发标签
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它 ...
- hybrid app开发中:苹果移动设备实用Meta标签
hybrid app开发中:苹果移动设备实用Meta标签 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 具体效果如下: status-bar- ...
- 手机web app开发笔记
各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
随机推荐
- 浅谈iOS中MVVM的架构设计与团队协作
说到架构设计和团队协作,这个对App的开发还是比较重要的.即使作为一个专业的搬砖者,前提是你这砖搬完放在哪?不只是Code有框架,其他的东西都是有框架的,比如桥梁等等神马的~在这儿就不往外扯了.一个好 ...
- (二)list或set的遍历
<@e.table class="tablelist questionlist" listAction="devide_check_list_batch.do&qu ...
- JavaScript 的原型对象 Prototype
在 JavaScript 中,每当定义一个对象(或函数)时候,对象中都会包含一些预定义的属性,其中一个属性就是原型对象 prototype. var myObject = function( name ...
- MySQL订单分库分表多维度查询
转自:http://blog.itpub.net/29254281/viewspace-2086198/ MySQL订单分库分表多维度查询 MySQL分库分表,一般只能按照一个维度进行查询. 以订单 ...
- EventBus的使用,初学EventBus传值
一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...
- HDU 2013 蟠桃记
蟠桃记 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- android学习日记25--ANR和Hander消息机制
1.ANR(Application Not Responding)定义 在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个对话框称作应用程序无响应(ANR:A ...
- 5.6 在线DDL (online DDL)详解
ONLINE ddl 原理: online ddl相关参数 测试原表数据是否能进行ONLINE DDL方法: online DDL 局限性 测试
- linux-insides-cn-BOOK
https://www.gitbook.com/book/xinqiu/linux-insides-cn/details https://www.gitbook.com/book/looly/elas ...
- 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 ...