应用
For iPhone 4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
For iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来，在横向（landscape）时采用landscape.css。
For Android
复制代码
/*240px的宽度*/
<link rel=”stylesheet” media=”only screen and (max-device-width:240px)” href=”android240.css” type=”text/css” />
/*360px的宽度*/
<link rel=”stylesheet” media=”only screen and (min-device-width:241px) and (max-device-width:360px)” href=”android360.css” type=”text/css” />
/*480px的宽度*/
<link rel=”stylesheet” media=”only screen and (min-device-width:361px) and (max-device-width:480px)” href=”android480.css” type=”text/css” />
参考
http://www.w3cplus.com/content/css3-media-queries
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
