开发 iOS WebApp 入门准备

所谓webapp就是指基于web网页技术的应用，任何精通web开发技术（php,javascript,html,css…..等）的开发人员都可以轻易的制作一款webapp。

关于webapp和传统web统网页的区别就在于，app能提供一些特殊功能，比如使用手机访问一个关于订餐的网页，如果在网页中实现了点击一个餐馆的电话号码，立刻能调用拨号程序建立通话，那么这个web网页应该就可以称作 webapp。

本文仅讨论在iOS下创建webapp的入门引导（基于Safari浏览器）。

一切就从‘添加至主屏幕’开始

（此功能在 iPhone 和 iPad 均有提供）

第一步：图标（icon）

既然是应用程序，图标肯定是第一门面，apple的开发文档中提到了两种方法为你的应用设置图标。

第一种：在你的网站根目录中，按一定规则放置一个PNG的图标文件即可（尺寸：57*57，114*114）；
有两种命名规范，apple-touch-icon.png 和 apple-touch-icon-precomposed.png，Safari 会自动搜索网站根目录中的这2个文件作为应用的图标并缓存在系统中；
以上两种命名规范其中，带有-precomposed 后缀的是告诉系统，这个文件已经是经过美化处理的，不需要系统添加任何修饰效果到图标上，反之系统会默认为图标叠加一层玻璃质感的高光效果。

第二种：使用 <link> 标签指定任意一个图标文件作为应用图标；
示例：<link rel=”apple-touch-icon” href=”/custom_icon.png”/>
同样这种方法也可以使用-precomposed 去掉系统修饰。

第二部：启动画面

启动画面也是一款应用的标准配置，特别是webapp，不至于让web页面还没有完全加载完成时显示一片空白吧！

同样仅需要一行代码就能实现，
示例：<link rel=”apple-touch-startup-image” href=”/startup.png”>
尺寸要求为：低分辨率320*460（去掉状态栏的高度）或者高分辨率640*920

第三步：去掉浏览器的导航栏和改变系统状态的样式

好了，最后一步了，想要让你的webapp更像一款手机应用，这是必不可少的一步，当然也可以跳过这一步。

开启全屏模式：<meta name=”apple-mobile-web-app-capable” content=”yes” />
判断是否全屏：利用Javascript访问window.navigator.standalone对象，会返回一个布尔值。
改变状态栏样式：<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
上面的代码是改变状态栏为黑色，另外还有两种样式default（默认蓝色）和black-translucent（这个是透明黑色，如果设置此模式，状态栏会覆盖在内容的上层）。
注意：只有在全屏模式下，状态栏样式才会被改变。

一切就绪，最后，就是发挥你的想象力的时刻了！

其他你需要知道的：

Safari Web Content Guide（官方的基于 Safari 的 web 开发指南）
Configuring Web Applications（官方WebApp配置文档，也就是本文原版）
使用 viewport meta 标签在手机浏览器上控制布局