iPhone WebApp 开发技术要点总结（一）
?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" 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" 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(..)? 多重背景。
?
由www.J2meGame.com精心收集。
