台州温岭做网站请找我们 (专业建站 | 诚信服务) 15372156293 在线客服 联系技术

佳源设计|台州网站建设|佳源网页设计

网站当前位置: 首页>>手机网站建设>>iOS Web App开发心得
建站流程
 
APP 开发
 
企业微信建设
 
手机网站建设
 
 建站知识搜索
 

台州网站建设
 
网站优化
 
提交疑问
 手机网站建设 > iOS Web App开发心得

iOS Web App开发心得

2332次浏览
2014-05-28

1、放到桌面

其实这个最简单啦,点浏览器的加号(2012年8月27日注:新版safari中已经不是加号了,而是iOS中经常表示“更多操作”的箭头),就会有一个菜单,添加到屏幕就行。

2、设置图标和启动画面

添加到屏幕后,默认的图标是一个纯白色图标,启动画面则是上次运行时的画面截图(所以感觉不到有启动画面)。为了更像原生的App,我们添加一下图标和启动画面。

图标的添加方法是在head区添加如下代码:

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

其中,icon.png是图标,必须为png格式,大小为5757像素(2012年8月27日注:iPad1/2为7272,iPhone3为5757,retina屏对应2,即iPad3为144144,iPhone4(s)为114114),不需要添加圆角和光影效果,iOS自己会处理。(2012年8月27日注:也可处理好圆角和光影,让iOS不再自动添加效果。)

启动画面的添加方法也差不多:

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

其中,startup.png是图标,必须为png格式,纵向图片,iphone/itouch的大小为320460,ipad为7681004。

要说明的是,启动画面的时间会很短,而且这个时间似乎是不可控的,个人感觉是在页面ready的时候启动画面消失。另外,在我试验用的itouch3上,图标和启动画面均未生效,iphone4和ipad上有效。(2012年8月27日注:关于启动画面是否可以横屏的问题,我找了很久没有找到对应的方法,但上次WebRebuild广州站,有演讲嘉宾说可以实现,待考。)

3、隐藏地址栏

为了更像本地App,我们要隐藏掉地址栏和系统工具栏,而在隐藏这个之前,我们必须设定程序全屏,否则无效。(2012年8月27日注:这里之前理解有误,第二个设定其实是底栏样式。)

全屏:

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

设定顶栏颜色为黑色(也可设为white或者black-translucent):

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

4、控制用户的缩放

作为一个网页,事实上可以无限缩放的(当然,缩小到比viewport还小时会自动充满viewport),而作为一个程序,我们有时候不希望这样的事情发生,如下代码可以解决:

<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale:1.0; maximum-scale:2.0; user-scalable=yes" />

上述代码的意思是,viewport的宽度为设备宽度,initial-scale是初始的缩放值。(按照我的理解,viewport的宽度值和initial-scale这两个属性应该是不可以同时存在的,因为定义了一个值会自动推算出另一个值,比如我将viewport的宽度设为屏幕宽度的2倍,那么initial-scale应该自动为0.5,待验证。)后面两个自然是能缩放的最小和最大值了。

如果不想让用户缩放,则可以将最小值和最大值设为一样,都为1.0,或者直接将user-scalable设为no。

5、离线

到这里,我们的App已经很像原生App了。可是,如果断网了怎么办?于是,最后的一步——离线。离线之后,我们的程序就可以在没有网络的时候正常运行,完全和原生App一样了!

上述已经说过的特性都是iOS独有的(2012年8月27日,事实上有很多已经变成事实标准了,比如viewport控制),但是离线是HTML5的特性。

要实现离线,首先得有一个先决条件:能修改web服务器的MIME(确切地讲,是MIME中有manifest类型)。关于MIME是什么就不详细介绍了。(2012年8月27日,关于这点也不太准确,在PC端的chrome中,并不关注.manifest文件的MIME,但是在iOS 4.3和5.0的safari中,都需要有准确的MIME才能使离线正常工作。)

首先,我们需要在web服务器中将.manifest后缀的MIME设为“text/cache-manifest”。对IIS,在站点属性中可以设置,对apache,则能直接通过修改.htaccess文件实现。不详述。

接下来,我们需要创建一个离线文件列表,列表中的文件将被缓存供下次使用。

我建立的名叫cache.manifest,内容如下:

CACHE MANIFEST 
# xpad v0.1.0009

# 指明缓存入口 
CACHE: 
index.html 
index.css 
jquery.js 
xpadicon.png 
xpadstartup.png 
images/pic.png

# 以下资源必须在线访问 
NETWORK: 
login.php

# 如果index.php无法访问则用404.html代替 
FALLBACK: 
/index.php /404.html

开头的是注释,这个好理解。文件分为三段:CACHE、NETWORK、FALLBACK。

CACHE表示要缓存的文件,即可以离线使用的资源,可以看到,html/css/js/pic都可以缓存,当然,其他类型的也可以。

NETWORK表示必须在线访问的,例如登录之类的页面。

FALLBACK表示如果在线访问失败时,用什么文件替换。上面的代码表示index.php访问失败时用404.html替换。这个可以用在网络不好的时候,例如一个离线应用去访问一个在线页面,但是没有访问成功,这时就可以调用一个已经离线了的页面去,不破坏用户体验。

再接下来,就是告诉iOS,我们的程序需要离线,方法是在访问的页面中的html标签中加入一个属性标记上面说的manifest文件:

<html manifest="cache.manifest">

访问一次,只要文件传输完毕,我们的应用就成功离线啦!这时断开网络再次打开,依然可以使用!

App化的操作基本都完成啦,可以先喝口茶休息下。


页面所在本站地址: http://www.52-life.net/Nshow_reurl.asp?reurl=iphone_tubiao
上一篇 >>TouchScroll 1.0 – 统一视觉样式的容器滚动解决方案
下一篇 >>什么是微网站(APP手机网站、WebAPP)