让你的iOS Web App更像原生App-知足常乐®

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

控制用户缩放

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

<meta name="viewport" 

   content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

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

更多ViewPort设置详情可参看iOS Developer Library。

隐藏Safari浏览器的UI

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

全屏模式:

<meta name="apple-mobile-web-app-capable" content="yes" />

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

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

自定义Web App的iPad或iPhone图标

让你的iOS Web App更像原生App-知足常乐®

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

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

<link rel="apple-touch-icon" href="/custom_icon.png"/>

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

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

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

 

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

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

添加启动画面

让你的iOS Web App更像原生App-知足常乐®

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

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

 <link rel="apple-touch-startup-image" href="/startup.png">

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

<link rel="apple-touch-startup-image" href="/startup-748x1024.jpg"

media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<link rel="apple-touch-startup-image" href="/startup-768x1004.jpg"

media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

总结

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