<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的样式是专门针对iPhone4的移动设备写的。iPhone4分辨率:320px *480px,iPhone使用Safari浏览器进行页面显示窗口宽度为980px,可以利用标签在页面中指定safari浏览器在处理本页时按照多少像素窗口宽度来进行:
<meta name="viewport" content="width=600px"><meta>
iPad
<link rel="stylesheet" media="all and (orientation:portrait)"href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css" type="text/css" />
在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说 上面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲 染页面。
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" />