Posts Tagged safari

Safari Web Content Guide – 配置视口

配置视口

iPhone OS 版本的Safari使用缩放模式显示网页,通常为桌面版设计的网页在这种模式下都工作良好,如果默认设置不适用于你的网页,那推荐你修改视口设置,如果你专门为iPhone OS设计网页,更加需要修改视口配置。配置视口很简单,就是在网页中添加一行代码,当然要理解视口属性如何对iPhone OS中的网页起作用是很复杂的。配置视口前,你需要深入了解iPhone OS中的可见区域和视口区域。

如果你已经熟悉了iPhone OS的视口机制,可以阅读 “Using the Viewport Meta Tag” 了解视口标签的详细使用,阅读 “Viewport Settings for Web Applications” 获取web应用程序技巧,此外按下面的顺序阅读这些章节:

Safari Web Content Guide – 调试

你需要在桌面环境和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.”

Safari Web Content Guide – 网页内容优化

优化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” 。

Safari Web Content Guide – 事件处理

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

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

可点击对象有:链接,表单对象,图片热点区或者其他添加了 mousemovemousedownmouseup, 或 onclick 监听的元素,可滚动元素是任何有正确 overflow 样式的对象,文本区域和可滚动的 iframe 元素。因为这些差异,你可能需要更改某些元素为可点击的,见 “Making Elements Clickable,” 中的介绍,了解其在iPhone OS下的行为特点。

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

Safari Web Content Guide – 获取地理位置

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

地理位置类

Navigator 对象具有只读的 Geolocation 实例变量,你可以通过这个 Geolocation 对象获取位置信息, Geolocation 中获取位置信息的函数通常可以设置回调函数, PositionCallback 或者 PositionErrorCallback 实例,因为获取位置信息可能会被延迟,无法立即返回结果,当位置被获取或者出现异常时会触发这些回调函数,如果位置信息获取到,位置回调函数会传入一个位置对象,如果出现异常,异常回调函数会传入一个 PositionError 实例对象描述错误信息,位置信息使用经纬度表示.

Safari Web Content Guide – 数据的客户端存储

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

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

Safari Web Content Guide – 配置网页应用程序

网页应用程序要设计成与本地程序有相似的界面和操作方式,举个例子,它可以缩放填充整个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” 了解网页程序中视口的使用

Safari Web Content Guide – 表单设计

表单设计

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

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

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

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