iPhone WebApp 开发技术要点总结（一）
转载地址：http://hi.baidu.com/omys/blog/item/4a14a323e3b2285eac34de29.html
iPhone WebApp 开发技术要点总结
简介
Apple iPhone 推出以后 ，以其动人的外观、超强的性能和丰富的软件资源吸引了众多的拥趸
者。iPhone 的原始出厂功能比较基本 ，仅能完成一般的电话、短信、时钟、邮件、上网以及定位
的较少的功能。然而 ，其基于 Apple Mac OS X 的操作系统 ，为用户提供了编写应用软件的可能。
目前仅在 AppStore 上架的软件就已经达到近十万个。可以形象的比喻 ，原始的 iPhone 像个刚
买来的电脑 ，但众多的第三方软件使其可以完成几乎任何你可以想象到的功能。
你的创意总是独特的 ，或许那些收费的或免费的软件不能满足你的愿望 ，您也想试图编写一些
应用程序来实现你的需求。那么 ，我可以告诉你 ，这点上 ，很难、也很容易。
难 ： Apple 公司为企图开发 iPhone 应用软件的公司和个人提供了开发所必须的软件开发工
具包 SDK （Software Develoment Kit ），然而 ，使用它 ，必须先向 Apple 注册申请 ，开发的软
件要提交 Apple Store 审核 ，然后才能上架发布。虽然现在已经出现了盗版的 SDK ，可以免注册
在 MAC 或 Windows 环境下进行开发 ，但其开发环境搭建的复杂 ，以及基于 Object-C 相对较难
的编程语言 ，也阻挡的很多爱好者试图开发程序的脚步。
易 ： 所幸的是 ， Apple 为我们提供了另一条简洁的开发途径 ，也就是在基于 WebKit 的 Safari
上 ，用户可以编写自己所需的 WebApp ，也就是网络应用软件。简单的说 ，应用程序可严格编写为
服务器上的 HTML、CSS 和 JavaScript 文件 ，实现大多数可以实现的功能需求。Web 开发和 SDK
开发是两种截然不同、各有利弊的开发方式。
WebKit 是一种浏览器引擎 ，支撑着 iPhone 内的 Mobile Safari 浏览器背后的技术。WebKit
是一个开源项目 ，它优先支持 HTML 和 CSS 特性。实际上 ，WebKit 还支持尚未被其他浏览器采
纳的一些诸如 HTML5 规范 CSS 样式。
iPhone 上的 Safari 支持的标准 ：
ü HTML 4.01
ü XHTML 1.0
ü CSS 2.1 以及部分 CSS 3
ü JavaScript (ES3)
ü DOM (Level 2)
ü AJAX (XMLHttpRequest)
熟悉这些标准并且平常也坚持 Web Standards 实践的朋友估计要笑出来了——就这些吗 ？我
们天天在用啊 ，还有必要专门写文章来说明吗 ？事实上 ，Safari 之前作为一款无 PC 版的浏览器 ，一
直用户数量就不高 ，因此对它的研究也就不多 ，然而 Safari 其实有不少自己的扩展 ，因此还是很值
得研究的。既然我们是针对 iPhone 设置 ，其实就是针对 Safari 设计 ，无需考虑兼容其它浏览器 ，
这时候为什么不好好利用这些扩展增强自己的应用程序的可用性呢 ？
虽然目前 iPhone WebApp 开发已经有诸如 iUI、Canvas、Dashcode 等很好的开发工具 ，
但了解掌握最基本的 html、javascript 、css 知识仍是十分必要的。本文竭力提供通俗易懂的内容 ，
以大量的例子入手 ，突出特性 ，适合有一定 Web 开发基础 ，并试图开发 iPhone WebApp 开发
的人士参考。
入门
1、首先要说的就是 viewport ，也就是可视区域。对于桌面浏览器 ，我们都很清楚 viewport
是什么 ，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域 ，这是真正有效的区
域。
对于传统 Web 页面直接在 iPhone上面显示来说是很好的事情 ，因为如果传统Web 页面在 980
宽度的桌面浏览器 viewport 中显示正常的话 ，iPhone 上显示也绝对正常。然而这对于 Web 应用
程序来说则不是好事 ，因为我们需要按照 980 宽度来设计将来会以 320 宽度显示的页面 ，一个应该
显示为 320*80 的元素 ，必须设计为 980*245 ，这多麻烦 ！因此我们需要改变 viewport。
实际上应该怎么做呢 ？我们有几个选择 ，因此先让我们看看到底我们能够设置哪些属性吧。我
们可以操作的属性有 4 个 ：
· width - viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
· height - viewport 的高度 （范围从 223 到 10,000 ）
· initial-scale - 初始的缩放比例 （范围从>0到 10 ）
· minimum-scale - 允许用户缩放到的最小比例
· maximum-scale - 允许用户缩放到的最大比例
· user-scalable - 用户是否可以手动缩放
这 6 个属性 ，我们可以设置其中的一个或者多个 ，iPhone 会根据你设置的属性自动推算其他属
性值 ，而非直接采用默认值。这点很重要 ，在完全不设置的时候有默认 viewport ，在你设置一个属
性后其它值是自动推算出来的 ，不再是默认的。
如果你把
initial-scale=1 ，那
么 width 和 height
在竖屏时自动为
320*356 （不是
320*480 因为地址栏
等都占据空间 ），横屏
时自动为 480*208。
类似地 ，如果你仅
仅设置了 width ，就
会自动推算出
initial-scale 以及
height。例如你设置
了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了。
那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如 ：
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>
在设置了 initial-scale=1 之后 ，我们终于可以以 1:1 的比例进行页面设计了。
关于 viewport ，还有一个很重要的概念是 ：iphone 的 safari 浏览器完全没有滚动条 ，而且不
是简单的 “隐藏滚动条” ，是根本没有这个功能。iphone 的 safari 浏览器实际上从一开始就完整显
示了这个网页 ，然后用 viewport 查看其中的一部分。当你用手指拖动时 ，其实拖的不是页面 ，而是
viewport。
浏览器行为的改变不止是滚动条 ，交互事件也跟普通桌面不一样。这在后面会进行详细说明。
2、必须注意到 ，为了让你的页面更好地受到 Safari 的支持。必须 ：
u 声明正确的 doctype ；
u 避免使用 frameset ；
u 每一个独立的资源文件 ，HTML、CSS、JavaScript、以及非流媒体的其他多媒体文件 ，
限制在 10m 之内 ；
u 顶级入口的 JavaScript 执行时间限制为 5 秒 ，超时将自动终止 ；
u JavaScript 分配内存上限为 10m ；
u 同一时间最多在 Safari 内打开 8 个子窗口 （同时浏览的页面 ）。
Safari 本身还对图片有如下的限制 ：
u GIF （包括 GIF 动画 ）、PNG 与 TIFF 解压后的体积小于 2m。意思是 ，原图的长度乘以
宽度再乘以每一个像素的位数 ，得出来的大小要小于 2m ；
u JPEG 解压后最大的体积是 32m。解压体积大于 2m 的 JPG 会被进行二次抽样 ，最终显
示给用户的是二次抽样后的结果。显示时实际上是降低了精度的 ，以提高程序的执行效率。
可以看出 iPhone 对 HTML 的支持与桌面端的 Safari 是类似的 ，只是加入了更多扩展功能而已。
使用 HTML 作为框架 ，适当嵌入 javascript ，灵活运用 CSS ，即可实现你编写 iPhone 应用软件
的快乐梦想。
3、HTML 的基本结构。很多人对 HTML 已经很熟了。在此仅做一简单复习。
<html>
<head>
<meta ……/ >
<link ……/ >
<title>……</title>
<script type="text/javascript" src="xxxx.js"></script>
<style type="text/css">……</style>
</head>
<script Language="JavaScript">……</script>
<body>……</body>
</html>
下面 ，侧重 iPhone Safari 的特性 ，详细介绍其各部分的内容。
框架
基于 WebKit 的 iPhone Safari ，有一些与电脑上的 Safari ，特别是与 IE(Internet Explorer)
不同之处 ，以下的说明中会特别注明。
1、头<head>部分 ：
①<meta>
定义网页语言 ：（如果使用了扩展字符 ，请选用 gb18030 ）
<meta http-equiv="Content-Type " content="text/html; charset=gb2312 "/ >
定义用户界面 ，宽度为设备宽度 （等同于 320 像素 ），并不可缩放 ）
<meta name = "viewport " content = "width = device-width, user -scalable = no "/ >
定义显示的数字串 ，不被自动识别为电话号码。否则会自动转换为拨号超链接。
<meta name="format-detection" content="telephone=no" />
定义开发者
<meta name="Author" contect="LSi "/ >
②<link>
web app 可以像原生应用一样 ，在 home 界面里上添加一个快捷方式图标
<link rel="apple -touch-icon" href="icon.png" />
这是针对单个页面的 ，如果你把图片命名为 “apple-touch-icon.png” ，放在网站的某个目录
里面 ，该目录下所有页面都会获得添加图标的功能……
图标的要求是尺寸 57×57 ，png 格式 ，不用画蛇添足的去做圆角渐变或玻璃反光效果 ，iphone
系统会把图片自动裁剪和渲染成统一的风格……
③<title>
定义可被搜索的网页关键词
<title>择吉老黄历</title>
④<script>
定义外部 javascript 文件
<script type="text/javascript" src="xxxx.js "></script>
⑤<style>
定义所用的 CSS （层叠样式表 Cascading Style Sheet ）
<style type="text/css">……</style>
iPhone Safari 支持的 CSS3 的很多新特性。灵活运用 CSS ，不仅可以简化程序 ，而且可以轻松
实现很多特殊的效果。这一点 ，会在后面详细说明。
2、JavaScript 部分
<script Language="JavaScript ">……</script>
这部分是程序实现各种功能的关键。一般包括 ：
n 变量定义
n 自定义函数
简单示例 ：
<script Language="JavaScript ">
var MsgArr=new Array()
var pPot =pMin=0; pMax =9
var wAddr= "http://bbs.weiphone.com/?u=61542 "
function pSetup(s)
{
return (s<pMax) ? true : false
}
</script>
当外部 js 文件与内嵌 javascript 段存在变量或函数冲突时 ，按加载顺序 ，以最后的定义为准。
Javascript 段亦可放在 <body> 段之后 ，可实现先加载 <body> ， 后加载 <javscript>。但
必须注意 ，由于是顺序加载 ，<body> 段不能引用后面的变量或函数 ，但可以向后调用。
3、<body>部分
这是程序界面的主要部分。程序的显示、交互一般都放到这个段。
简单示例 ：
<body style="margin: 0; font -size: 12pt; font -family: Trebuchet MS; color: #FFFFFF"
ontouchmove="event.preventDefault()" onload="tImg.style.visibility='visible' " >
<img id="tImg" class="sImg" src="TestFile.png" onerror="pError()" />
<table id="layerT" style=" position absolute; width: 320px; height: 480px ">
<tr><th id="TitleBar" colspan="2" height="48px"> </th></tr>
<script Language="JavaScript">
for (i=0; i<=pMax; i++)
{
document.write("<tr ontouchend ='DispImg(" + i +")' style='border-top:
1px solid #CCC'><td id='M" + i + "'></td><td width='12' > ＞</td></tr>");
}
</script>
<tr><td id="ToolBar" colspan="2" height="42px"> </td></tr>
</table>
<div id="layerH" style="position: absolute; width: 320px; height: 480px; left: 0px; top:
0px; background -color: RGBA(0,0,0,0.3); z-index: 1; visibility:hidden">
<div id="layerM" style=" -webkit-border-radius:12px; border:2px solid #FFF;
-webkit-box-shadow: 0px 2px 4px #888;
position: absolute; left: 24px; top: 106px;
width: 256px; height: 268px; padding -left: 8px; padding-right: 8px;
color: #FFFFFF; text-shadow: 1px 1px 1px #000; text -align: center;
background-color: RGBA(32,48,96,0.9);
background-image:url('BG-Msg.png'); background-repeat:no-repeat;
z-index: 1; visibility: hidden; ">
<p><span style="font -size: 16pt; font -weight: bold">使用说明</span></p>
<hr noshade size="1">
<div id="HelpText" style="height: 120px">说明文字</div>
<hr noshade size="1">
<form name="formV" method="POST">
<input type="button" class="sButton" value="确认" name="B1"
onclick=" layerH.style.visibility='hidden'" / >
</form>
</div>
</div>
</body>
简要说明 ：
ontouchmove="event.preventDefault()" //锁定 viewport ，任何屏幕操作不移动用户界
面 （弹出键盘除外 ）。
onload="tImg.style.visibility='visible'" // <body>加载完成后 ，显示该图片。
onerror="pError()" //图片加载错误时 ，执行错误处理过程。（特别说明 ：在 IE 中 ，只有图
片文件不存在 ，才返回错误 ；而在 iPhone Safari 中 ，图片文件不存在 ，或格式不正确 ，均返回错
误。因此这种方式 ，只能用来判断图片文件是否存在。）
position: absolute; width: 320px; height: 480px //设定该容器绝对定位位置 ，正好为完全
的 viewport 尺寸。（特别说明 ：除非参数值为 0 ，建议数值参数均带上单位。）
id="TitleBar" //定义单元标志 ，其后可以使用 ：TitleBar .innerText = "标题文字" 或
TitleBar .innerHTML = "<b>标题文字</b>" 来重置该单元内容。不同的是 innerText 是纯文本
内容 ，而 innerHTML 可以使用规范的 html 格式。
width: 256px; height: 268px; padding -left: 8px; padding-right: 8px; //由于设定了容器
的 padding 值 ，所以 ，该容器的宽度实际是 ：256 + 8 + 8 = 272 px。
z-index: 1 //设定该层的顺序。层号越大越靠上 ；若有相同层号 ，按程序中定义顺序 ，后边的靠
上 ；设定为 -1 会不显示 ，但为显示方便 ，避免层设定混乱 ，隐藏某层一般使用 ：visibility: hidden。
属性
1、字体
①font-family 字体名称 （iPhone 自带字体参见右表 ）
②font-size: 字号参数 （一般标题使用 18 pt ，正文使用 12pt ，按钮使用 14pt,工具条使用
12px ）
③font-style: 斜体字的名称 （italic ）
④font-weight: 字体粗细 （取值范围从数字 100~900 ，浏览器默认的字体粗细为 400 ，默认
加粗 bold 为 700。另外可以通过参数 lighter 和 bolder 使得字体在原有基础上显得更细或更粗些。）
⑤text-transform ：文字大小写
uppercase ：所有文字大写显示
lowercase ：所有文字小写显示
capitalize ：每个单词的头字母大写显示
none ：不继承母体的文字变形参数。
⑥text-decoration ：文字修饰
underline ：为文字加下划线
overline ：为文字加上划线
line-through ：为文字加删除线
blink ：使文字闪烁
none ：不显示上述任何效果。
⑦text-align ：文本水平对齐
left ：左对齐
right ：右对齐
center ：居中对齐
justify ：相对左右对齐
但需要注意的是 ，text-alight 是块级属性 ，只能用于<p>、<blockquqte>、<ul>、<h1>~<h6>
等标识符里。
⑧vertical-align ：文本垂直对齐
top ：顶对齐
bottom ：底对齐
text-top ：相对文本顶对齐
text-bottom ：相对文本底对齐
baseline ：基准线对齐
middle ：中心对齐
sub ：以下标的形式显示
super ：以上标的形式显示 ）
⑨text-shadow: 1px 1px 1px #000 ：文字阴影。（参数分别为 ：水平 X 方向偏移量 ；垂直 Y
方向偏移量 ；高斯模糊半径值 ；阴影颜色值 ）
2、颜色
①color ：颜色属性 （颜色参数取值范围 ： 以 RGB 值表示 ；以 16 进制 （hex ）的色彩值表示 ；
以默认颜色的英文名称表示 ，注意大小写 ！）
例如 ：
color #0080FF (可以使用#abc 缩写来表示#aabbcc)
color RGBA(00,33,66,0.5) (Red:0 Green:33 Blue:66 opacity:50%)
color red (颜色代码保留字 ，参见下表)
Black="#000000" Green="#008000" Gray="#808080" White="#FFFFFF"
□ □ □ □
Silver="#C0C0C0" Lime="#00FF00" Yellow="#FFFF00" Olive="#808000"
□ □ □ □
□ Fuchsia="#FF00FF" □ Maroon="#800000" □ Red="#FF0000" □ Purple="#800080"
Aqua="#00FFFF Teal="#008080" Blue="#0000FF" Navy="#000080"
□ □ □ □
②background-color ：背景颜色
参数取值和颜色属性一样。
3、背景
①background-image: url(URL)
URL 就是背景图片的存放路径。如果用 “none”来代替背景图片的存放路径 ，将什么也不显示
②background-repeat ：背景图片重复 （默认的是水平、垂直两个方向上平铺 ）
no-repeat ：不重复平铺背景图片
repeat-x ：只在水平方向上平铺
repeat-y ：只在垂直方向上平铺
③background-position ：背景定位 （用于控制背景图片在网页中显示的位置。其参数为带长
度单位的数字参数 ，其取值范围 ：
top ：相对前景对象顶对齐
bottom ：相对前景对象底对齐
left ：相对前景对象左对齐
right ：相对前景对象右对齐
center ：相对前景对象中心对齐
比例关系
参数中的 center 如果用于另外一个参数的前面 ，表示水平居中 ；如果用于另外一个参数的后面 ，
表示垂直居中。 ）
4、容器
①margin 边框空白。位于 BOX 模型的最外层 ，包括四项属性。格式分别如下 ：
margin-top ：顶部空白距离
margin-right ：右边空白距离
margin-bottom ：底部空白距离
margin-left ：左边空白距离
如果使用上述属性的简化方式 margin ，可以在其后连续加上四个带长度单位的数字 ，来分别表
示 margin-top、margin-right、margin-bottom、margin-left ，每个数字中间要用空格分隔。
②border 对象边框。位于边框空白和对象空隙之间 ，包括了七项属性。格式分别如下 ：
border-top ：顶边框宽度
border-right ：右边框宽度
border-bottom ：底边框宽度
border-left ：左边框宽度
border-width ：所有边框宽度
border-color ：边框颜色
border-style ：边框样式参数
其中 border-width 可以一次性设置所有的边框宽度 ，border-color 同时设置四面边框的颜色
时 ，可以连续写上四种颜色 ，并用空格分隔。上述连续设置的边框都是按 border-top、border-right、
border-bottom、border-left 的顺序。
Border-style 相对别的属性而言稍稍复杂些 ，因为它还包括了多个边框样式的参数 ：
none ：无边框。
dotted ：边框为点线。
dashed ：边框为长短线。
solid ：边框为实线。
double ：边框为双线。
groove ：根据 color 属性显示不同效果的 3D 边框
ridge ：根据 color 属性显示不同效果的 3D 边框
inset ：根据 color 属性显示不同效果的 3D 边框
outset ：根据 color 属性显示不同效果的 3D 边框
③padding 对象间隙。位于对象边框和对象之间 ，包括了四项属性。基本格式如下 ：
padding-top ：顶部间隙
padding-right ：右边间隙
padding-bottom ：底部间隙
padding-left ：左边间隙
和 margin 类似 ，padding 也可以一次性设置所有的对象间隙。
④background: url(..), url(..), url(..), url(..) 多重背景。