苹果iPhone WebApp 开发指南Word文档格式.docx
《苹果iPhone WebApp 开发指南Word文档格式.docx》由会员分享，可在线阅读，更多相关《苹果iPhone WebApp 开发指南Word文档格式.docx（32页珍藏版）》请在冰豆网上搜索。
ü
以及部分
（）
（）
熟悉这些标准并且平常也坚持实践的朋友估计要笑出来了——就这些吗？
我
们天天在用啊，还有必要专门写文章来说明吗？
事实上，之前作为一款无版的浏览器，一
直用户数量就不高，因此对它的研究也就不多，然而其实有不少自己的扩展，因此还是很值
得研究的。
既然我们是针对设置，其实就是针对设计，无需考虑兼容其它浏览器，
这时候为什么不好好利用这些扩展增强自己的应用程序的可用性呢？
虽然目前开发已经有诸如、、等很好的开发工具，
但了解掌握最基本的、、知识仍是十分必要的。
本文竭力提供通俗易懂的内容，
以大量的例子入手，突出特性，适合有一定开发基础，并试图开发开发
的人士参考。
二、入门
、首先要说的就是，也就是可视区域。
对于桌面浏览器，我们都很清楚
是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区
域。
对于传统页面直接在上面显示来说是很好的事情，因为如果传统页面在
宽度的桌面浏览器中显示正常的话，上显示也绝对正常。
然而这对于应用
程序来说则不是好事，因为我们需要按照宽度来设计将来会以宽度显示的页面，一个应该
显示为*的元素，必须设计为*，这多麻烦！
因此我们需要改变。
实际上应该怎么做呢？
我们有几个选择，因此先让我们看看到底我们能够设置哪些属性吧。
们可以操作的属性有个：
·
的宽度（范围从到，默认为像素）
的高度（范围从到）
初始的缩放比例（范围从>
到）
允许用户缩放到的最小比例
允许用户缩放到的最大比例
用户是否可以手动缩放
这个属性，我们可以设置其中的一个或者多个，会根据你设置的属性自动推算其他属
性值，而非直接采用默认值。
这点很重要，在完全不设置的时候有默认，在你设置一个属
性后其它值是自动推算出来的，不再是默认的。
如果你把
，那
么和
在竖屏时自动为
*（不是
*因为地址栏
等都占据空间），横屏
时自动为*。
类似地，如果你仅
仅设置了，就
会自动推算出
以及
。
例如你设置
了，竖屏时就是，横屏时则变成了。
那么到底这些设置如何让知道？
其实很简单，就一个，形如：
<
"
"
;
;
>
在设置了之后，我们终于可以以的比例进行页面设计了。
关于，还有一个很重要的概念是：
的浏览器完全没有滚动条，而且不
是简单的“隐藏滚动条”，是根本没有这个功能。
的浏览器实际上从一开始就完整显
示了这个网页，然后用查看其中的一部分。
当你用手指拖动时，其实拖的不是页面，而是
浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。
这在后面会进行详细说明。
、必须注意到，为了让你的页面更好地受到的支持。
必须：
声明正确的；
避免使用；
每一个独立的资源文件，、、、以及非流媒体的其他多媒体文件，
限制在之内；
顶级入口的执行时间限制为秒，超时将自动终止；
分配内存上限为；
同一时间最多在内打开个子窗口（同时浏览的页面）。
本身还对图片有如下的限制：
（包括动画）、与解压后的体积小于。
意思是，原图的长度乘以
宽度再乘以每一个像素的位数，得出来的大小要小于；
解压后最大的体积是。
解压体积大于的会被进行二次抽样，最终显
示给用户的是二次抽样后的结果。
显示时实际上是降低了精度的，以提高程序的执行效率。
可以看出对的支持与桌面端的是类似的，只是加入了更多扩展功能而已。
使用作为框架，适当嵌入，灵活运用，即可实现你编写应用软件
的快乐梦想。
、的基本结构。
很多人对已经很熟了。
在此仅做一简单复习。
……>
……<
下面，侧重的特性，详细介绍其各部分的内容。
三、框架
基于的，有一些与电脑上的，特别是与（）
不同之处，以下的说明中会特别注明。
、头<
部分：
①<
定义网页语言：
（如果使用了扩展字符，请选用）
定义用户界面，宽度为设备宽度（等同于像素），并不可缩放）
"
定义显示的数字串，不被自动识别为电话号码。
否则会自动转换为拨号超链接。
>
定义开发者
②<
可以像原生应用一样，在界面里上添加一个快捷方式图标
这是针对单个页面的，如果你把图片命名为“”，放在网站的某个目录
里面，该目录下所有页面都会获得添加图标的功能……
图标的要求是尺寸×
，格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，
系统会把图片自动裁剪和渲染成统一的风格……
③<
定义可被搜索的网页关键词
择吉老黄历<
④<
定义外部文件
⑤<
定义所用的（层叠样式表）
支持的的很多新特性。
灵活运用，不仅可以简化程序，而且可以轻松
实现很多特殊的效果。
这一点，会在后面详细说明。
、部分
这部分是程序实现各种功能的关键。
一般包括：
变量定义开发指南
自定义函数
简单示例：
{
（<
）?
:
}
当外部文件与内嵌段存在变量或函数冲突时，按加载顺序，以最后的定义为准。
段亦可放在<
段之后，可实现先加载<
，后加载<
但
必须注意，由于是顺序加载，<
段不能引用后面的变量或函数，但可以向后调用。
、<
部分
这是程序界面的主要部分。
程序的显示、交互一般都放到这个段。
:
（）"
'
<
（;
）
{
（"
'
（"
）'
＞<
）;
}
（）;
（'
使用说明<
说明文字<
确认"
简要说明：
锁定，任何屏幕操作不移动用户界
面（弹出键盘除外）。
加载完成后，显示该图片。
图片加载错误时，执行错误处理过程。
（特别说明：
在中，只有图
片文件不存在，才返回错误；
而在中，图片文件不存在，或格式不正确，均返回错
误。
因此这种方式，只能用来判断图片文件是否存在。
）
设定该容器绝对定位位置，正好为完全
的尺寸。
除非参数值为，建议数值参数均带上单位。
定义单元标志，其后可以使用：
标题文字"
或
标题文字<
来重置该单元内容。
不同的是是纯文本
内容，而可以使用规范的格式。
由于设定了容器
的值，所以，该容器的宽度实际是：
。
设定该层的顺序。
层号越大越靠上；
若有相同层号，按程序中定义顺序，后边的靠
上；
设定为会不显示，但为显示方便，避免层设定混乱，隐藏某层一般使用：
四、属性
、字体
①:
字体名称（自带字体参见右表）
②:
字号参数（一般标题使用，正文使用，按钮使用,工具条使用
③:
斜体字的名称（）
④:
字体粗细（取值范围从数字，浏览器默认的字体粗细为，默认
加粗为。
另外可以通过参数和使得字体在原有基础上显得更细或更粗些。
⑤：
文字大小写
：
所有文字大写显示
所有文字小写显示
每个单词的头字母大写显示
不继承母体的文字变形参数。
⑥：
文字修饰
为文字加下划线
为文字加上划线
为文字加删除线
使文字闪烁
不显示上述任何效果。
⑦：
文本水平对齐
左对齐
右对齐
居中对齐
相对左右对齐
但需要注意的是，是块级属性，只能用于<
、<
等标识符里。
⑧：
文本垂直对齐
顶对齐
底对齐
相对文本顶对齐
相对文本底对齐
基准线对齐
中心对齐
以下标的形式显示
以上标的形式显示）
⑨:
：
文字阴影。
（参数分别为：
水平方向偏移量；
垂直开发指南
方向偏移量；
高斯模糊半径值；
阴影颜色值）
、颜色
①：
颜色属性（颜色参数取值范围：
以值表示；
以进制（）的色彩值表示；
以默认颜色的英文名称表示，注意大小写！
例如：
（可以使用缩写来表示）
（）（）
（颜色代码保留字，参见下表）
□"
□"
②：
背景颜色
参数取值和颜色属性一样。
、背景
就是背景图片的存放路径。
如果用“”来代替背景图片的存放路径，将什么也不显示
背景图片重复（默认的是水平、垂直两个方向上平铺）
不重复平铺背景图片
只在水平方向上平铺
只在垂直方向上平铺
③：
背景定位（用于控制背景图片在网页中显示的位置。
其参数为带长
度单位的数字参数，其取值范围：
相对前景对象顶对齐
相对前景对象底对齐
相对前景对象左对齐
相对前景对象右对齐
相对前景对象中心对齐
比例关系
参数中的如果用于另外一个参数的前面，表示水平居中；
如果用于另外一个参数的后面，
表示垂直居中。
、容器开发指南
①边框空白。
位于模型的最外层，包括四项属性。
格式分别如下：
顶部空白距离
右边空白距离
底部空白距离
左边空白距离
如果使用上述属性的简化方式，可以在其后连续加上四个带长度单位的数字，来分别表
示、、、，每个数字中间要用空格分隔。
②对象边框。
位于边框空白和对象空隙之间，包括了七项属性。
顶边框宽度
右边框宽度
底边框宽度
左边框宽度
所有边框宽度
边框颜色
边框样式参数
其中可以一次性设置所有的边框宽度，同时设置四面边框的颜色
时，可以连续写上四种颜色，并用空格分隔。
上述连续设置的边框都是按、、
、的顺序。
相对别的属性而言稍稍复杂些，因为它还包括了多个边框样式的参数：
无边框。
边框为点线。
边框为长短线。
边框为实线。
边框为双线。
根据属性显示不同效果的边框
③对象间隙。
位于对象边框和对象之间，包括了四项属性。
基本格式如下：
顶部间隙
右边间隙
底部间隙
左边间隙
和类似，也可以一次性设置所有的对象间隙。
（..）,（..）,（..）,（..）多重背景。
五、事件
、
在第二章中提到过，浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不
一样：
所有动作，还有，都不存在。
点击页面元素之后发生的事情很复杂：
比如当你用单指按住可点击元素，然后放开，首先触发的
居然是！
接下来如果元素内容不变，会陆续触发，，，
如果内容改变，就不会再触发任何事件。
如果按住元素之后移动手指，当然就不要指望会触发了，啥事情都没有，不过停
下的时候，会触发（因为你刚才移动了嘛……）
如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，
而且所在的位置是一个本来有滚动条的页面元素（比如罢），会触发一个叫的事
件（但是别指望本身的内容会滚动）,停止移动时同样触发。
如果你熟悉下的网页制作，那必须告诉你的交互事件的一些特殊之处。
相对于，增加了一些屏幕操作的事件：
当手指接触屏幕时触发
当已经接触屏幕的手指开始移动后触发
当手指离开屏幕时触发
当两个手指接触屏幕时触发
当两个手指接触屏幕后开始移动时触发
运用这几个交互事件，完成某一元素的移动，或者检测手指在屏幕上的划动，已经十分简单。
[];
[]"
（）"
对于某一可点击表格元素使用和均可完成点击触发事件的功能，二者的区
别在于：
不可用于，并且不会出现点击后元素的外观变化（例如被点击单元格会高
亮显示），这也许正是你所需要的。
当然，被点击元素的外观变化，可以使用样式来设定：
颜色
另外，在上，会有残留。
例如点击后显示某一个层，如果该层在此位置
也定义了可触发，则可能会也触发这个事件。
屏幕旋转事件：
，这当然是所特有的了。
添加屏幕旋转事件侦
听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。
例子：
（）{
（“没旋”）;
（“左旋”）;
（“右旋”）;
（'
（）{
（）;
}）;
隐藏地址栏处理事件的时候，防止滚动条出现：
（（）{（,）;
},）;
双手指滑动事件：
},）;
对值进行判断（比如正负），而后执行相应操作
判断是否为：
（（（'
））}
六、特性
本章介绍上所特有的一些性能。
众所周知，为了保护用户的安全性，程序禁止向客户端写入任何文件。
这一定程
度上限定了一些的功能范围。
可以变通使用的来写文
件，这在上则无法实现。
如果用户想保存一些数据，比如某些设定或用户登录数据，待程
序下次执行时可以直接读取，怎么办呢？
”使用!
相信很多朋友会这样回答。
是的，可以使用，但是，使用有
很多缺陷，除了读写比较复杂外，还有：
用户没有打开怎么办？
期间用户删除了怎
么办？
其实，有一项符合规范的扩展功能：
它使得开发者
的这种需求变得十分简单。
（注意数据名称要用引号引起来）
）:
如果名称是的
数据存在，则将其读出，赋予变量。
）;
写入名称为、值为的数据
删除名称为的数据
、电话
如果你关闭自动识别后，又希望某些电话号码能够链接到的拨号功能，那么可以通过这
样来声明电话链接：
或用于单元格：
、自动大写与自动修正
在文本框中输入时，提供了自动大写与自动更正两项功能。
自动大写的意思是，在输入
开始的时候，以及在一个句号并空一个格后，自动会启用，输入一个字母后该自动消失。
自动修正的意思是，会自动根据词库，包括自带的以及从你过往输入分析而来的，来对你的
输入进行自动更正。
我们都知道用手指点击那么小一个软键盘很容易误按旁边的键，这时候你可以不
用忙于修正，只要提示的自动修正的词正是你想要的，你就可以按空格然后输入下一个词，
会自动修正前面那个词。
要关闭这两项功能，可以通过与这两个选项：
基于的还有一些特有的样式，为有别与其它游览器，它使用：
详见第七章。
七、
（，层叠样式表）是一种制作网页的新技术，现在已经为大多数的
浏览器所支持，成为网页设计必不可少的工具之一。
（）把动态（）分为三个部分
来实现：
脚本语言（包括、等）、支持动态效果的浏览器（包括、
、等）和样式表。
、定义方式，包括外部调用和内部嵌入两种：
、一般格式为：
{:
对于第一种，使用：
或在
段，使用：
来引用。
对于第二种，无需引用，其对所有表格中的标题单元格（）均起作用。
、作用级别：
如果相应的样式在多处均有描述，则其作用级别（从低到高）为：
外部文件、内嵌段（引用、重设）、元素定义（"
……
、"
……"
）。
、特有样式。
实施大子的规格所界定的万维网联盟（），以及部分的
规格。
（为便于查询，也包括了一些同类别的非样式）。
①“盒模型”的具体描述性质的包围盒块内容，包括边界，填充等等。
容器圆角
边框常量值：
容器阴影（参数分别为：
垂直方向偏移量；
常量值：
（）;
内置的表现，暂时只支持
②“视觉格式化模型”描述性质，确定了位置和大小的块元素。
常量：
③“视觉效果”描述属性，调整的视觉效果块内容，包括溢出行为，调整行为，能见度，动画，
变换，和过渡。
（,,,）
常量:
动画效果
（默认值）
镜向反转
（,,,
（）,（,）,（））;
（,,,（（））,（（）））;
遮罩蒙板效果
（默认）
（与）
④“生成的内容，自动编号，并列出”描述属性，允许您更改内容的一个组成部分，创建自动编
号的章节和标题，和操纵的风格清单的内容。
“”（）”“;
.
⑤“分页媒体”描述性能与外观的属性，控制印刷版本的网页，如分页符的行为。
升级会员 