发表于 & 归档在 Web.

原始地址:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW3

Safari的文档看过让人受益匪浅,比如网页中添加doctype信息,不要总是使用 user agent 判断浏览器

创建兼容的Web内容

本章介绍兼容桌面版和iPhone版本safari的一些好的做法,这些准则简单的改进了系统在各个平台上的可靠性、性能、呈现效果和用户体验,如果你的目标是iPhone OS,第一步是让你的web内容在桌面版本中能正常工作,如果你的目标是桌面版本,通过很小的修改就可以使之在iPhone OS上很好的呈现。

举个例子,你需要注意iPhone OS上Web内容的布局和功能局限,如果你使用条件CSS(参考章节: “Optimizing Web Content,” ),你的网页可以在iPhone OS上最佳化,同时其他浏览器也可以正常显示,阅读余下的章节学习如果使网页内容在safari下最佳显示。

iPhone OS 注意:当你设计网页,首先要了解iPhone OS下的Safari 网页如何渲染,用户如何通过触摸手势进行缩放,平移和双击交互。阅读 iPhone Human Interface Guidelines for Web Applications 了解iPhone OS平台下的使用习惯,技巧和界面交互设计。

使用Web标准

第一原则是使用Web标准,标准的Web开发技术可以保证在所有主流浏览器下有较一致的呈现效果和功能,包括Safari,一个好的网站设计只需要很少的Safari上支持的优雅效果。

桌面版本和iPhone OS版本的Safari都使用WebKit内核,该内核支持所有最新现有的Web标准,包括:

  • HTML 4.01
  • XHTML 1.0
  • CSS 2.1 and partial CSS3
  • ECMAScript 3 (JavaScript)
  • DOM Level 2
  • AJAX technologies, including XMLHttpRequest

Web技术是不断在发展的,WebKit和Safari也是,你可以从WHATWG(Web Hypertext Application Technology Working Group)和W3C(World Wide Web Consortium (W3C) standards bodies)追踪最新Web技术的发展和标准趋势. WHATWG 和 W3C 网站是开始学习这些标准和即将发布的HTML5规范的好去处:

对于Safari参考文档如Safari HTML Reference and Safari CSS Reference, 可以了解特定平台的特性

遵循好的Web设计实践

你需要遵循完善的Web设计准则,这个章节包括Safari中严格要求的基本准则,阅读 Web Page Development: Best Practices 了解更多网页设计建议。

  • 在网页文件中添加DOCTYPE 标识

    HTML文件开头添加 DOCTYPE , 这告诉浏览器按什么标准去解析你的网页内容,参阅 “HTML Basics”

  • 将HTML, CSS, JavaScript文件分开

    将HTML标签,CSS渲染和脚本交互文件分开,使你的网页更容易维护

  • 使用结构良好的HTML

    要实现跨平台浏览器的兼容,你需要修复如缺少引号,闭合标签缺失,错误嵌套,错误逻辑和畸形的doctype,参考 http://validator.w3.org 或者使用Web开发工具检验

  • 保持浏览器独立

    避免通过user agent判断浏览器,而改用对象诊察 Object Detection 判断浏览器是否支持某些特殊对象和属性,阅读 Detecting WebKit with JavaScript 学习如何诊察特别的WebKit版本号,同时请使用W3C标准的方法访问页面对象 - 如使用 getElementByID("elementName"). 通过user agent字符串诊别只作为最后的手段,参考“Using the Safari User Agent String”

阅读 “HTML Basics” and “CSS Basics” 学习如何编写规范的HTML和CSS以及如何在已有的HTML中插入CSS。

使用安全特性Use Security Features

所有平台的Safari都使用相同的SSL加密保障端到端的安全,同样的加密措施适用于无线环境,用以防止线路窃听,包括Wi-Fi, 3G, EDGE,明确说,Safari支持:

  • SSL 2, SSL 3, and TLS with many popular cipher suites
  • RSA keys up to 4096
  • HTTPS

iPhone OS Note: 注意iPhone OS平台不支持 Diffie-Hellman 协议, DSA 密钥, 自签证书

避免使用Framesets

总之,避免使用复杂的框架集,即那种单个窗体可以滚动的情况,因为iPhone OS没有滚动条

在桌面版,框架集中的窗体可以独立滚动,如插图 1-1,在iPhone OS下,可滚动的窗体会展开以适应他的内容,然后单个窗体会被缩放到所在的区域,内部窗体也是如此,所有内部窗体可以通过双指平移,参看 “Two-Finger Events” 双指手势产生的相关事件.

因为内部窗体没有滚动条,所以在iPhone OS中,这不是一种好的查看网页的用户体验,所以要避免使用 framesets. 改用分栏和块布局 “Use Columns and Blocks.”

Figure 1-1 Comparison of frameset on the desktop and iPhone OSComparison of frameset on the desktop and iPhone

使用分栏和块

为适应iPhone OS,使用栏和块布局你的网页内容,就像很多在线报纸那样,这可以使网页可读性更好,同时iPhone OS的双击缩放交互可以工作良好

iPhone OS下,延伸整个网页的宽度的文字块儿难以阅读,如图1-2,分栏布局不只是分隔了网页内容,也使之更容易阅读,如下右图,同时用户容易通过双击触摸查阅

Figure 1-2 Comparison of no columns vs. columnsComparison of no columns vs. columns

iPhone OS下,当用户双击触点网页,Safari首先判断对象是否允许双触,然后找出闭合的块儿(如元素<div>, <ol>, <ul>, 和 <table>)或者使图片对象,如果找到,Safari缩放内容适应屏幕宽度,并且居中呈现,如果是图片,Safari会缩放图片到合适大小并居中,如果元素或者图片已经被放大,Safari会缩小显示

如果你使用分栏和块儿布局,你的网页将通过双击触摸很好的呈现,参阅 “CSS Basics” 学习如果在已有的网页中设置CSS

了解iPhone OS中的资源限制

桌面环境好的网页,不一定能在iPhone OS中表现良好,要铭记iPhone OS使用EDGE, 3G, Wi-Fi链接互联网,因此你需要考虑你网页的大小,包括一些不需要或者不必要的图片,CSS和JavaScript,在iPhone OS下,这些可能会影响你网站的性能

因为iPhone OS内存的局限,限制资源访问的数量:

  • GIF, PNG, 和 TIFF图片不超过300万像素

    也就是说保证 width * height ≤ 3 * 1024 * 1024. 因为图片解码后的大小远大于编码后的大小

  • 使用采样,支持最大3200万像素的JPEG图片

    使用采样,允许16个像素被解码成一个像素,大于2百万像素的JPEG图片使用这种方式,可以大大减小解码后的尺寸,使JPEG图片可以提高到3200万像素,允许用户从最新数码相机上查看图片

  • canvas对象支持最大300万像素

    如果没有指定,canvas对象的初始大小是150 x 300 像素

  • 单个资源文件必须小于10 MB.

    这个限制适用于HTML, CSS, JavaScript, 以及非流媒体.

  • 每次顶层切入点JavaScript执行时间限制在10秒内

    如果你的脚本执行超过10秒,Safari for iPhone OS可能会在任何位置停止这个脚本,出现不可预知的结果

    这个限制是为了避免主程序被阻塞,导致用户无法对网页进行交互

    阅读 “Debugging” 了解调试JavaScript on iPhone OS.

  • 最多同时打开八个文档

iPhone OS Note: 在iPhone OS 1.1.4 和早期版本,JavaScript 执行时间限制在5秒,分配大小限制在10MB,此外canvas对象的限制大小与桌面版本的Safari相同

iPhone OS Note: iPhone OS 2.2.1 以及早期版本,所有窗体的大小限制在200万像素,也就是 width * height * number of frames ≤ 2 * 1024 * 1024. 在 iPhone OS 3.0 和早期版本这个限制适用于单个窗体

你还要注意图片的数量,如不要将一个100 x 100 的图片放到10 x 10 <img> 个元素中,也不要在背景平铺一堆小图片,也不要使用巨大的背景图片

检查网页大小

使用桌面版本Safari的检查器(参阅: “Optimizing Download Time” in Safari User Guide for Web Developers )可以检查网页的大小,也可以通过保存网页,查看网页存档的大小和资源

  1. Choose File > Save As.
  2. Enter the filename in the Save As text field.
  3. Choose Web Archive from the Format pop-up menu.
  4. Click Save.

在 Mac OS X,使用 Finder 或者 Terminal检查存档大小. iPhone OS中小于30 MB的页面可以正常工作

使用选择表单元素

如果使用选择表单元素,iPhone OS 会显示一个定制的选择控件,你可以选择输入On iPhone OS, the user can flick to scroll the list and tap to select an item from the list. Figure 1-3 compares the select element on the desktop with the select element on iPhone OS.

Figure 1-3 Comparison of the select element on the desktop and iPhone OSComparison of the select element on the desktop and iPhone

Use Supported JavaScript Windows and Dialogs

Use windows and dialogs supported by Safari on iPhone OS and avoid the others.

You can open a new window in JavaScript by invoking window.open(). Remember that the maximum number of documents—hence, the maximum number of open windows—is eight on iPhone OS.

Supported JavaScript dialog methods include alert, confirm, and prompt. If you use these methods, Safari on iPhone OS displays an attractive dialog that doesn’t obscure the webpage, as show in Figure 1-4.

Figure 1-4 Confirm dialogConfirm dialog

iPhone OS Note: Note that the showModalDialog and print methods are not supported in Safari on iPhone OS.

支持内容类型和iPhone OS特性

要了解Safari on iPhone OS支持的内容类型和元素,以适合小的手持设备触摸屏的呈现,简而言之,Safari on iPhone OS中视频和PDF文件的支持与桌面环境有所区别,Safari on iPhone OS也支持内容的预览或者调用其他应用程序打开,如果该文当类型可呈现的话,网页中的电话号码也可以被执行

iPhone 和 iPod touch中,视频和音频只能以全屏模式播放,视频会自动展开到全屏,屏幕翻转时自动旋转,如图1-5,控制控件自动隐藏, 在iPad中视频和音频即可以内嵌在网页中播放也可以全屏播放,参阅 “Creating Video” for how to export video for iPhone OS.
Figure 1-5 Playing video on iPhone OSPlaying video on iPhone

PDF 文档很容易在Safari on iPhone OS中查阅和翻页,如图1-6. PDF documents linked from web content are opened automatically. The page indicator keeps track of where the user is in a document. And just as with video, the user can rotate iPhone OS to view a PDF in landscape orientation.

Figure 1-6 Viewing PDF documents on iPhone OSViewing PDF documents on iPhone

Safari on iPhone OS还可以预览MS Office(Word, Excel and PowerPoint), iWork (Pages, Numbers, and Keynote), and RTF 文档.如果其他程序注册了内容类型预览,那么这些程序也可以打开这些文档,举例,iPad中Pages 可以用来打开Word和Pages文档格式,如果其他注册程序不能在Safari中本地的打开和预览,允许文档被下载并用该程序打开

iPhone OS Note: iPhone OS 3.2和之后的版本 才支持RTF 文档的预览,以及允许文件被下载。

如果用户点击某些链接,Safari on iPhone OS会调用本地程序处理这个链接,如Mail程序发送邮件,Maps程序获取位置,YouTube播放视频。在电话设备中,如果用户点击电话号码链接,会出现一个对话框询问是否拨打该号码。在桌面环境中,很多链接都是直接连接到网站,参阅: Apple URL Scheme Reference 了解网页内容中的链接类型

iPhone OS Note: 不支持Java和Flash,参阅:“Don’t Use Unsupported iPhone OS Technologies” 了解哪些技术不被支持

使用Canvas绘制矢量图形和动画

你可以使用Canvas对象创建复杂用户界面的Web程序,这些同样用于Dashboard widgets,canvas对象在Safari 2.0被引入,并被作为WHATWG 规范的一部分,参阅:WebKit DOM Programming Topics 了解canvas对象的使用

使用HTML5 音频和视频标签

你可以使用HTML5的 audiovideo 标签向网页中嵌入音频和视频内容。On smaller devices like iPhone and iPad touch, the movie plays in full screen mode only and automatic playback is disabled so a user action is required to initiate playback. On iPad, the video plays inline in the webpage. When the video is played inline, you can create custom controls and receive media events—for example, pause and play events—to enhance the user experience. Use the HTMLMediaElement class and its subclasses, described in Safari DOM Additions Reference, to do this. Read Safari HTML5 Audio and Video Guide for more in-depth information on the audio and video elements. Read “Creating Video” for how to create media files compatible with Safari.

使用iPhone OS支持的多媒体类型

Table 1-1 lists the rich media MIME types supported by Safari on iPhone OS. Files with these MIME types and filename extensions can be played on iPhone OS.

Table 1-1 Supported iPhone OS rich media MIME types

MIME typeDescriptionExtensionsaudio/3gpp3GPP media3gp, 3gppaudio/3gpp23GPP2 media3g2, 3gp2audio/aiffaudio/x-aiffAIFF audioaiff, aif, aifc, cddaaudio/amrAMR audioamraudio/mp3audio/mpeg3audio/x-mp3audio/x-mpeg3MP3 audiomp3, swaaudio/mp4MPEG-4 mediamp4audio/mpegaudio/x-mpegMPEG audiompeg, mpg, mp3, swaaudio/wavaudio/x-wavWAVE audiowav, bwfaudio/x-m4aAAC audiom4aaudio/x-m4bAAC audio bookm4baudio/x-m4pAAC audio (protected)m4pvideo/3gpp3GPP media3gp, 3gppvideo/3gpp23GPP2 media3g2, 3gp2video/mp4MPEG-4 mediamp4video/quicktimeQuickTime Moviemov, qt, mqvvideo/x-m4vVideom4v

iPhone OS中不支持的技术

In general, Safari on iPhone OS does not support any third-party plug-ins or features that require access to the file system. The following web technologies are not supported on iPhone OS:

  • 网络字体 Downloadable web fonts

    If you attempt to download web fonts, the CSS is parsed but the font fails and a default font is used instead. The default font is dependent on the browser.

  • 模式对话框

    Don’t use window.showModalDialog() or window.print() in JavaScript. Read “Use Supported JavaScript Windows and Dialogs” for a list of supported dialogs.

  • 鼠标悬停事件 Mouse-over events

    The user cannot “mouse-over” a nonclickable element on iPhone OS. The element must be clickable for a mouseover event to occur as described in “One-Finger Events.”

  • 悬停样式 Hover styles

    Since a mouseover event is sent only before a mousedown event, hover styles are displayed only if the user touches and holds a clickable element with a hover style. Read “Handling Events” for all the events generated by gestures on iPhone OS.

  • 工具提示 Tooltips

    Similar to hover styles, tooltips are not displayed unless the user touches and holds a clickable element with a tooltip.

  • Java applets
  • Flash

    Don’t bring up JavaScript alerts that ask users to download Flash.

  • QuickTime VR (QTVR) movies
  • Plug-in installation
  • Custom x.509 certificates
  • WML

    Safari on iPhone OS is not a miniature web browser—it is a full web browser that renders pages as designed—therefore, there is no need for Safari on iPhone OS to support Wireless Markup Language (WML). Alternatively, it does support XHTML mobile profile document types and sites at .mobi domains.

    The XHTML mobile document type is:

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
  • 文件上传和下载 File uploads and downloads

    Safari on iPhone OS does not support file uploading, that is, <input type="file"> elements. If your webpage includes an input-file control, Safari on iPhone OS disables it.

    Because iPhone OS does not support file downloads, do not prompt the user to download plug-ins like Flash on iPhone OS. See “Using the Safari User Agent String” for how to detect Safari on iPhone OS.

  • HTML contenteditable 属性

    Safari on iPhone OS不支持元素的即时编辑,你可以用textarea替代 <p contenteditable><div contenteditable> ,此外可以通过CSS设置textarea对象的呈现效果,如设置 -webkit-appearancenone.

默认Safari for iPhone OS阻止弹出窗体,可以在安全设置中更改设置

iPhone OS Note: iPhone OS 1.1.4 和之后版本支持网络字体. SVG 在iPhone OS 2.1和之后版本中被支持. XSLT 在iPhone OS 2.0 和之后的版本中被支持

发表评论

电子邮件地址不会被公开。 必填项已用*标注


9 × = 七十 二

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>