逐浪云主机

立即开通

如何开发支持苹果iphone手机的网站-让你的iOS Web App更像原生App

作者:本站编辑 发布时间:2014-11-18 来源:本站原创 点击数:

有很多个方法可以让你的网页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图标    

用户可以简单地把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:

 

    <linkrel="apple-touch-icon"sizes="72x72"href="touch-icon-ipad.png"/>
    <linkrel="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)。

添加启动画面    

移动设备上原生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的使用体验,同时逐浪CMS还提供基于windows phone以及安卓系统的优化知识。

 

本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友