iPhone Web 开发应用 (下篇).pdf

iPhoneWeb开发应用（下篇）

本节介绍的是iPhoneWeb开发应用（下篇），继续iPhoneWeb开发应用（上篇）开
始介绍，在文章里有详细介绍iPhoneWebApps交互方案，和CSS，等一些我们常用的一些内
容知识，希望对你有兴趣。

在接下来的两篇文章中，我们将探讨iPhone上的Safari所支持的XHTML与CSS，之后才进
入JavaScript的讨论。作为一款现代化的浏览器，Safari当然是基于标准的，那就让我们看
看Safari支持哪些标准吧：

HTML4.01

XHTML1.0

CSS2.1以及部分CSS3

JavaScript（ES3）

DOM（Level2）

AJAX（XMLHttpRequest）

熟悉这些标准并且平常也坚持WebStandards实践的朋友估计要笑出来了——就这些
吗？我们天天在用啊，还有必要专门写文章来说明吗？事实上，Safari之前作为一款无PC
版的浏览器，一直用户数量就不高，因此对它的研究也就不多，然而Safari其实有不少自己
的扩展，因此还是很值得研究的。既然我们是针对iPhone设置，其实就是针对Safari设计，
无需考虑兼容其它浏览器，这时候为什么不好好利用这些扩展增强自己的应用程序的可用性
呢？

好吧，不说废话了，进入Safari对XHTML支持的介绍吧！

链接

iPhone对一下这样一些链接有特殊支持：

邮件

传统的mailto:地址iPhone将能自动使用内含的邮件程序处理，直接进入编写邮件的界
面。完整的mailto:格式请参考RFC2368。

电话
iPhone上的Safari会自动对看起来像是电话号码的数字串（包括已经加入连字符或括号
格式化过的）添加电话链接，点击之后会询问用户是否想要拨打该号码。如果你不希望开启
这个自动识别，可以将它关闭：

<metaname=“format-detection”content=“telephone=no”/>

如果你关闭自动识别后，又希望某些电话号码能够链接到iPhone的拨号功能，那么可以
通过这样来声明电话链接：

<ahref=“tel:[phone]”>13800138000</a>

GoogleMaps

GoogleMaps的地图链接会自动调用内置的GoogleMaps客户端软件打开，而非在浏览器
内浏览。链接可以是一个地点查询：

<ahref=“http://maps.google.com/maps?q=cupertino”>Cupertino</a>

也可以是一个路线查询：

<a
href=“http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino”>Di
rections</a>

YouTube

如果链接是指向YouTube视频地址的，将会自动调用内置的YouTube客户端打开播放。能
够识别的YouTube地址格式为：

http://www.youtube.com/watch?v=<videoidentifier>

http://www.youtube.com/v/<videoidentifier>

其中<videoidentifier>替换为视频的id。

图片

由于用户浏览时有可能使用Wi-Fi，也有可能使用EDGE（GPRS），因此你必须优化你的图
片以确保即使是在使用EDGE访问你的网站的用户也能流畅的打开页面。因此你必须优化页面
上的图片，尽量减少它们占用的传输带宽。另外Safari本身还对图片有如下的限制：

GIF（包括GIF动画）、PNG与TIFF解压后的体积小于2m。意思是，原图的长度乘以宽度再
乘以每一个像素的位数，得出来的大小要小于2m。
JPEG解压后最大的体积是32m。解压体积大于2m的JPG会被进行二次抽样，最终显示给用
户的是二次抽样后的结果。这使得Safari能够显示数码相机直接拍摄出来的照片，但显示时
实际上是降低了精度的，以提高程序的执行效率。

为了尽量提高效率，例如你要将100*100的图片显示为10*10，就要在服务器端执行压缩
操作，而不要直接用10*10的<img/>来引用100*100的原始图片。

表单

text,password,textarea

在设计文本框的时候，必须记住用户点击后会出现软键盘，这时候可视区域就减少了：

另外在文本框中输入时，iPhone提供了自动大写与自动更正两项功能。自动大写的意思
是，在输入开始的时候，以及在一个句号并空一个格后，自动会启用shift，输入一个字母
后该shift自动消失。自动修正的意思是，iPhone会自动根据词库，包括自带的以及从你过
往输入