iPad的CSS3媒体查询
iPad的Safari浏览器和iPhone的一样，都支持CSS3媒体查询。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。iPhone是通过屏幕最大宽度来侦测的。是这样：
<link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" />
<link rel="stylesheet" media="screen and (min-width: 321px)" href="landscape.css" />
而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样：
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css" />
之后只要将不同的样式分别定义出来就可以了。在桌面平台测试的话，firefox，Safari和Chrome都支持方向属性，只需要改变窗口让高度大于宽度，就会识别为纵向屏幕。
Cloud Four Blog的文章里有制作一个例子，可以去试试看。
相关文章：
Category: 设计