[转]Building iPhone Apps with HTML CSS and JavaScript
编写Iphone Web App的三个主要技术是HTML, CSS, Javascript,不需要在Iphone上安装,也不要用Objective-C来写,所以对于前端来说算是比较容易上手。相对于Native App来说,Web App的优点是开发周期比较快而且可以运行在任何Web浏览器中并且开发不只是在Mac OS上,缺点是你不可以访问Iphone的一些硬件特性而且很难实现一些高级的UI效果。
有一些需要注意的地方整理了一下:
1.准备一个Iphone的样式表
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only screen and (max-width: 480px)” />
2.控制页面的缩放,如果不指定的话Iphone会认为你的网页宽度为950px
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
3.添加Home页图标,如果用户要添加你的Web App到Home页的快捷方式的话,需要指定一个ICON,有两种
<link rel=”apple-touch-icon” href=”myCustomIcon.png” />
<link rel=”apple-touch-icon-precomposed” href=”myCustomIcon.png” />
4.全屏模式
<meta name=”apple-mobile-web-app-capable” content=”yes” />
5.状态栏
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
6.自定义启动图片,这个png图片的尺寸是320px X 460px
<link rel=”apple-touch-startup-image” href=”myCustomStartupGraphic.png” />
7.使用JQTouch来实现动画
JQTouch是一个基于Jquery的手机Web开发的插件,下载地址:http://jqtouch.com/
8.使用HTML5来实现客户端数据存储
HTML5提供了LocalStorage, SessionStorage和客户端数据库
9.使用HTML5来实现离线应用
离线应用需要在服务器端存放一个manifest文件,然后<html manifest=”demo.manifest”>,如果你在使用Apache或其它的Web服务器,需要添加一个.htaccess文件到你的网站目录,里面的内容为:AddType text/cache-manifest .manifest
manifest的文件格式如下:
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
NETWORK:———–>FALLBACK:
logo.jpg ————>logo.jpg offline.jpg
NETWORK表示的是在线文件白名单,如果你离线的话,这个图片不会显示,如果想让其它图片替换这个图片的话,可以改成箭头所示。
10.使用PhoneGap让你的Web App变成Native App
PhoneGap是一个连接Web应用程序和手机设备桥梁的开源开发工具。
了解更多请阅读“Building iPhone Apps with HTML, CSS, and JavaScript”这本书以及云谦的“iPhone 上的Web前端开发”。