让你的iOS Web App更像原生App

发布于：2013-01-21 16:58阅读数：

有很多个方法可以让你的网页App更像原生app，比如控制用户缩放，隐藏Safari用户界面，你还可以添加启动画面和自定义icon。 控制用户缩放 网页可以无限缩放，但一个App，我们有时候并

Web App 原生App

有很多个方法可以让你的网页App更像原生app，比如控制用户缩放，隐藏Safari用户界面，你还可以添加启动画面和自定义icon。

控制用户缩放

网页可以无限缩放，但一个App，我们有时候并不希望缩放功能来添乱。想让Web App更像原生App，你要做的一件事就是控制用户的缩放，你可以像下边这样添加viewport meta tag实现：

viewport的宽度为屏幕宽度，initial-scale是初始缩放值，maximum-scale=1.0是能缩放的最大值。如果不想让用户缩放，则可以将最小值和最大值设为一样，都为1.0。

更多ViewPort设置详情可参看

隐藏Safari浏览器的UI

也可称之为Web App的“单机模式”，首先必须设定程序全屏，否则无效。

全屏模式：

隐藏地址栏：在App的顶部还有一个状态栏，你可以更进一步通过把状态栏设置成黑色来自定义app的外观，从而使你的app可以利用整个屏幕。

自定义Web App的iPad或iPhone图标

用户可以简单地把Web页面的链接添加至iOS设备的主屏幕上，作为一个Web开发者，你会希望控制Web site或者Web App的icon在用户设备上的展现方式。你可以通过跟多元标签来实现，苹果称之为“Web Clips”。如果你要搜索更多在用户屏幕自定义Web App icon内容的话，你可以搜“web clips”。

你需要的只是一个特别的icon，可以在head区添加如下代码实现：

同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可用apple-touch-icon-precomposed代替apple-touch-icon。

系统默认的图标大小是57x57像素，不过一些设备有着不同的分辨率，你可以创建具有不同分辨率的icon：

最常用apple-touch-icon.png，但也可以包含尺寸大小信息以及是apple-touch-icon-precomposed还是apple-touch-icon(e.g. apple-touch-icon-57x57-precomposed.png)。

添加启动画面

移动设备上原生App是有启动画面的，而Web页面和Web App没有。因此，你需要在Web页面和Web App上添加启动画面才能让它更像原生App，这个过程跟自定义icon差不多---需要通过 <link>添加适当标签。

与icon一样，不同规格尺寸的设备需要不同的启动画面，最常用最简单的方法使设置一个单独的图片:

对iPhone和iPod touch而言, 图片是320x460像素，但是，如果你想使用分辨率更高的图片，下边方法可以实现：

总结
尤其是单页面的App，在iOS设备上运行和原生App相差无二的App是一项重要的功能。以上是一些简单的设置方面的建议，可以简单地适用于 Web页面和Web App，为了减小Web页面和Web App与原生App的使用体验，你可以从学习更多有关于iOS Web自定义方面的内容。

来源：Ardalis

CocoaChina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！

请搜索微信号“CocoaChina”关注我们！