文章分类： Web

你需要在桌面环境和iPhone OS设备都测试你的网页，如果你没有iPhone OS设备，你可以在 iPhone OS SDK 中的模拟器中测试，因为iPad屏幕较大，而Safari的行为方式也会有些微区别，所以你还需要在iPad上测试（使用模拟器或者iPad设备），你还可以通过修改桌面版Safari的user agent来模拟iPad。对于任何平台Safari中的测试，你都需要使用调试控制台调试你的网页内容。

iPhone OS 版本Safari提供了一个调试控制台，允许你在模拟器或者设备上调试你的网页内容和程序，这个控制台可以显示异常，警告，提示，并记录HTML, JavaScript和CSS信息，控制台也可以显示未拦截的JavaScript异常，本章介绍如何激活调试控制台，察看控制台上的消息以及打印你的消息。

更多Safari上的调试技巧，可以参阅： Safari User Guide for Web Developers. ，阅读章节 Safari User Guide for Web Developers  中的 “Changing the User Agent String”  学习如何在桌面版Safari中模拟iPad ── 在用户代理菜单中选择“其他 ”，然后输入iPad的 user agent string ，详见 “Using the Safari User Agent String.”

优化iPhone OS下网页内容的第一步：将iPhone OS特有的内容与桌面版本的分开，接下来为iPhone OS调整网页。即使你的目标平台不是iPhone OS，你也可以按这些步骤操作，这可以确保你的网页在以后更容易维护

使用条件判断CSS，为iPhone OS创建特有的样式，见 “Using Conditional CSS.” 中的描述，你还可以通过对象侦测和WebKit侦测使用主流浏览器不支持的扩展功能 “Follow Good Web Design Practices” ，如果有必要，使用user agent字符串判断Safari版本和设备类型 “Using the Safari User Agent String” 。

完成优化后，阅读余下来的章节学习viewport属性的设置，文字大小的调整，表单排布，增加事件监听，使用程序链接，导出iPhone OS支持的媒体格式，最后学习调试网页“Debugging” 。

本章介绍iPhone OS中用户网页交互时产生的事件，表单和文档会产生和桌面版相似的事件，iPhone OS 上的 Safari通过手势模拟鼠标事件，此外你还可以直接监听多点触摸和手势事件，这些是iPhone OS特有的，方位事件是另一种iPhone OS特有的事件，还有一点需要知道是哪些事件不被支持，如剪切，复制，粘贴。

用户可使用手势代替鼠标事件，如双拍缩放，滑动平移，但是单触多点触摸能否产生这些事件取决于点击对象是否可点击或者可滚动，见 “One-Finger Events” 和 “Two-Finger Events.”中的描述。

此外，你可关闭Safari的默认行为，见 “Preventing Default Behavior”，并直接处理这些多点触摸和手势事件，这样保证开发人员能如同本地程序那样，实现独特，参阅 “Handling Multi-Touch Events” 和 “Handling Gesture Events” 了解更多触摸事件。

本章介绍获取和跟踪主机设备地理位置信息的相关JavaScript类，这些类隐藏了位置信息如何获取的具体实现──是通过GPS， IP地址，Wi-Fi，蓝牙或者其他技术？这些类允许你获取当前位置，或者一系列位置更新信息。

地理位置类

网页或网站程序有几种方式在客户端存储数据，你可以使用 JavaScript database 类，详见 Safari Client-Side Storage and Offline Applications Programming Guide, 在客户端存储程序数据或使用 HTML5 缓存资源文件，可以使网页在离线状态下依然可以显示，同样使用客户端缓存也可以提高网页的加载速度，降低网络连接数。本章节将描述如何利用HTML5程序缓存和数据的本地存储

要在客户端缓存资源，首先需要配置一个资源列表文件，并在主网页中申明这个列表文件，然后你可以使用JavaScript操作缓存以及相关操作。当没有可用网络时，之前被加载过的资源依旧可以正常显示。此外程序还可以缓存浏览器状态，这样之前在这太电脑或者设备上使用过的网页程序在离线时依旧可用 – 如在飞行模式

网页应用程序要设计成与本地程序有相似的界面和操作方式，举个例子，它可以缩放填充整个iPhone OS屏幕，这样你可以无缝的将你的网页程序放到主屏上，如同其他本地程序那样，这些为iPhone OS做的设置在其他平台下是不被理睬的。

举个例子，你可以设置一个特殊的图标，当它被添加到主屏时可以显示这个图标，这在 “Specifying a Webpage Icon for Web Clip.”中有详细描述。 当你的网页程序通过主屏启动时，你可以隐藏Safari界面，参阅 “Changing the Status Bar Appearance” 和 “Hiding Safari User Interface Components,” ，所有这些设置在其他平台下都是无效的。

参阅 “Viewport Settings for Web Applications” 了解网页程序中视口的使用

表单设计

iPhone OS上有很多调整表单的方法，这使表单更好用。在iPhone OS 有限的屏幕下，表单应该整洁，尤其当你为iPhone OS专门设计网页时，网页程序可以有很好的用户体验，甚至如同本地程序一样的效果，因此，用户期待他们如同本地程序同样的行为。

本章说明如何让你的表单在iPhone OS中很好的工作：

• 考虑键盘显示隐藏时所占用的屏幕空间
• 使用CSS扩展创建定制控件
• 自动纠错与大写字母的使用

参阅 iPhone Human Interface Guidelines for Web Applications 了解更多iPhone OS下表单布局和网页程序设计的技巧，阅读 “Hiding Safari User Interface Components” 学习如何使用全屏，如同本地程序。