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” 。
使用条件CSS
当你使用分栏布局你的网页，你可以通过条件CSS为不同平台和移动设备创建不同的布局，使用CSS3 media queries，你可以为iPhone OS添加特别的css，而不会影响其他平台下网页的渲染效果。 如例,图2-1是添加了条件CSS网页在iPhone OS下的显示效果，图2-2是这个网页在桌面的效果。
Figure 2-1 Small
device rendering
Figure 2-2 Desktop rendering
CSS3支持多种媒体类型，包括：print, handheld, 和 screen，iPhone OS忽略print和handheld类型，因为这两种不支持高端的网页内容，因此请为iPhone OS使用screen类型。
某些样式是iPhone OS独有，不影响其他平台，如在网页中 only 和 screen 配合使用，老的浏览器忽略 only k关键词不会读取iPhone OS的样式表，使用 device-width, max-device-width, 和 min-device-width 描述屏幕尺寸。
如例，使用类似下面的表达式可以专用于iPhone 和 iPod touch：
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
下面表达式专用于非iPhone OS设备:
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
或者在CSS文件中按下面的方式区别设备类型:
@media screen and (min-device-width: 481px) { ... }
下面是CSS3媒体特定样式的一些例子，你可以为屏幕和打印设置不同的样式， Listing 2-1 是屏幕显示灰色背景白色文字，Listing 2-2 表示在打印时用白底黑字，并隐藏导航条 Listing 2-1 Screen-specific style sheet
Listing 2-2 Print-specific style sheet
更多media queries信息，请访问: http://www.w3.org/TR/css3-mediaqueries/.
使用Safari User Agent 字符串
浏览器都有一个特殊的字符串，叫user agent, 用于向网站标示自己，Web服务器或者被加载网页中的JavaScript可以侦别这个客户端标识，据此修改自己的行为。一种简单的情况，user agent字符串包含应用程序的名字，如程序名称 Navigator 版本号 6.0 ，桌面版本 Safari 和iPhone OS版本Safari 都有自己的user agent 字符串。 iPhone OS版本Safari的user agent与桌面版本的相似，除了两点，平台名称和移动版本号。另外设备名称中也包括平台名，如你可以区分iPhone 和 iPad，你可以不给iPad发送iPhone专有的web内容，因为iPad有更大的屏幕。注意字符串中的版本号会随新版本的发布而变化，所以任何检测user agent的代码不要依赖版本号。 如 Listing 2-3 中显示的user agent字符串是iPhone OS 2.0以及之后版本的，其中编译号用 XXXX 代替 Listing 2-3 iPhone running on iPhone OS 2.0 user agent string
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20
其中user agent字符串如下：
(iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us)
平台名称是 iPhone ，在iPod下运行时替换为 iPod iPad下是 iPad 。
AppleWebKit/525.18.1
WebKit 内核版本号
Version/3.1.1
Safari 家族版本号
Mobile/XXXXX
移动版本号, 其中 XXXX 是编译号.
Safari/525.20
Safari编译号.
下面是iPod touch下的user agent 字符串，平台名称包含 iPod ，如 Listing 2-4. Listing 2-4 iPod touch running iPhone OS 1.1.3 user agent string
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
iPad下的user agent 字符串，平台名称包含 iPad ，如 Listing 2-5. Listing 2-5 iPad running iPhone OS 3.2 user agent string
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
注意，早期iPhone OS版本Safari的user agent 字符串与现在的有差异，Listing 2-6 显示的是iPhone OS 1.1.4 及其早期版本的user agent ，这些版本的平台名称中不包含iPhone OS的版本号 Listing 2-6 iPhone running iPhone OS 1.0 user agent string
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
通常，你可以使用WebKit版本号来检测所支持的WebKit HTML 标签和 CSS 属性。桌面版本Safari的user agent中也包含Safari版本或者marketing 版本信息，因此，你可以使用它追踪整个Safari平台的访问统计信息 访问下面的网站，了解更多Safari和WebKit相关的技术信息: