ios web App应用程序(ios meta)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--启动图片-->
<link rel="apple-touch-startup-image" href="http://s1.meituan.net/touch/img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="
图片一:在网站中进行保存
图片二:保存至主屏幕
图片三:填写名称
图片四:主屏幕中样式
图片五:启动时的启动界面
图片六:启动完成后的界面
图片七:后台运行图标-独立存在
图片八:编辑图标
图片九:删除图标提示
从图中可以看出该程序的运行外观上是脱离于浏览器的,实际上也是通过浏览器核心渲染出的,可以看作是一个app应用程序在运行,类似快捷方式。
web app 最大的好处有两点:
- 不需要通过苹果商店发布。
- 开发成本低,直接通过html5技术和苹果提供的js函数,能够做出滑动等效果,效果上面能够完全模拟应用程序效果,非常适合企业做客户端使用。
最明显的缺点:
- 不支持推送(push)。
大家都知道 HTML5 带来的革新,其中有一项功能就是对push的支持(现在PC上chrome支持push),虽然在苹果上面目前还不能实现此功能,以后应该会开发这块儿功 能(感觉如果web app支持推送,那么对他自己本身app store业务应该会有影响吧!!!)。
还是来说下这两个meta对web app的设定吧~
第一个meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
说明:
- 网站开启对web app程序的支持。
第二个meta:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
- 在web app应用下状态条(屏幕顶部条)的颜色;
- 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:
- 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
- 具体查看图片十、图片十一、图片十二。
纠正:
- 之前查阅了一些资料,说apple-mobile-web-app-status-bar-style属性为隐藏状态栏,其实这是一个误解,在这里为大家纠正一下这个问题。
图示:
图片十:black状态
图片十一:default状态
图片十二:black-translucent状态
两个meta的设置即可对web app程序进行支持了。
苹果web app其他设置:
当然,配合web app的icon 和 启动界面需要额外的两端代码进行设定,如下所示:
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
说明:
- 这个link就是设置web app的放置主屏幕上icon文件路径(图片四)。
使用:
- 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
- 图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
说明:
- 这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。
使用:
- 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
- 官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。
还要说明下,如图三,里面的默认名称为代码title标签的内容。
至此,一个web app建立完成。
如果对web app的这两个meta还有不能详细理解的可以查看官方解释:
关于link方面还有更多的参数设置(例如:ipod、ipad、iphone不同尺寸不同图标),可以查看官方标准文档:
后话:虽然web app可能是将来移动网站的应用趋势,但目前能够看见一些不够强大的地方,就目前的ios4的设备而言之前就被报道过,web app的运行性能不高,还存在迟缓现象,原因是safari 本身有个javascript的加速引擎,但是web app虽然是通过webkit核心渲染,但是未在safari进行运行,所以js引擎将无法对其进行加速作用。