2. 小屏幕CSS
iPhone和PC或Mac机最大的不同就是它的屏幕更小，如你的页面可以在桌面浏览器和屏幕阅读程序中运行，最简单的办法是为iPhone编写独立的样式表，下面是要使用到的标记：
<!--[if !IE]>-->
<link
rel="stylesheet"
href="small-screen.css"
type="text/css"
media="only screen and (max-device-width: 480px)"
/>
<!--<![endif]-->
<link
rel="stylesheet"
href="small-screen.css"
type="text/css"
media="only screen and (max-device-width: 480px)"
/>
<!--<![endif]-->
这里的link单元使用了media查询目标设备，最大宽度设为480像素，也就是iPhone在横向时可用的宽度，对于IE 5.5或更早的版本需要使用IE附加条件的注释，这些版本都缺乏media查询支持，将为iPhone载入样式表，我们还是以一个例子进行说明。
在例1中(链接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css.html)，我们将看到在iPhone浏览器上显示一个红框的页面，在其它浏览器上就显示蓝色。common.css文件包括了所有浏览器的样式，其内容如下：
#test-block {
background: blue;
color: white;
font-family: Verdana;
padding: 10px;
width: 300px;
height: 100px;
}
background: blue;
color: white;
font-family: Verdana;
padding: 10px;
width: 300px;
height: 100px;
}
从上面的代码可以看出其定义了蓝色框。另一个small-screen.css文件是为所有小屏幕设备定义的样式，其内容如下：
#test-block {
background: red;
}
background: red;
}
它定义了红色的背景。
如果你只愿意定义一个样式表，你可以使用@media块向主样式表中只添加iPhone样式表即可，如：
@media only screen and (max-device-width: 480px) {
#test-block {
background: red;
}
}
#test-block {
background: red;
}
}
在例2(链接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css-inline.html)中我们可以看到一个内联样式表，在它使用的样式表文件onestyleforall.css中，你可以看到在@media块中为红色背景进行了声明。
