发表于 & 归档在 HTML, Web.

优化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
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-widthmax-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

@media screen {
        #text { color: white; background-color: black; }
}

Listing 2-2  Print-specific style sheet

@media print {
        #text { color: black; background-color: white; }
        #nav  { display: none; }
}

更多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相关的技术信息:

 

发表评论

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


四 + 5 =

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