R_移动页面@media兼容

摘要：

[iPhone 4带来的革新，retina display绝对是最吸引眼球的一项。正是依赖这视网膜显示屏，iPhone 4的分辨率达到了640×960 pixels，不过为了保持向下兼容性，它采用的仍然是320×480 points。也就是说，在不进行缩放的情况下，显示普通图片时，它会用4个像素来显示图片中的1个像素;而在显示retina图片时，每个像素都对应图片中的1个像素。

如此一来，老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点，但是不会出现只有左上角那1/4的区域有内容的情况。

在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些Android机型是1.5。]

那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机

iPhone4/4s的分辨率为640*960 pixels，DPI为是326，设备高度为480px

iPhone5的分辨率为640*1136 pixels，DPI依然是326，设备高度为568px

那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5

使用css

通过 CSS3 的 Media Queries 特性，可以写出兼容iPhone4和iPhone5的代码~~

方式一，直接写到样式里面

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */.class{}}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */.class{}}

方式二，链接到一个单独的样式表，把下面的代码放在标签里

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" /><link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />使用JS//通过高度来判断是否是iPhone 4还是iPhone 5isPhone4inches = (window.screen.height==480);isPhone5inches = (window.screen.height==568);

常用适应代码

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */    .class{....    }}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */    
.class{....    }
}@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */ 
.class{....    }
}@media (device-height:773px) and (-webkit-min-device-pixel-ratio:2){/* 兼容三星NEXUS 6P */ 
.class{....    }
}@media (device-height:1024px) and (-webkit-min-device-pixel-ratio:2){/* 兼容IPAD */ 
.class{....    }
}