兼容iPhone4和iPhone5的方法

在移动开发中，iPhone4的分辨率是640*960pixels，但是iPhone5的分辨率却是640*1136pixels，所以在兼容上面还是存在一些小问题的。

解决思路如下：

1.在网页中，pixel（像素）与point（点）比值称为device-pixel-ratio（设备像素），普通设备上是1，iPhone4上面是2，有些android机型是1.5.那么-webkit-min-device-pixel-ratio:2，用来区分iPhone（4/4s/5）和其他手机。

设备像素：设备像素又称物理像素，设备能控制显示的最小单位，我们可以把这些像素看做成显示器上一个个的点。

设备独立像素：（密度无关像素）可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素（例如，css像素，只是在android机中css像素就不叫“css像素”了而是叫“设备独立像素”）。

2.iPhone4的分辨率是640*960pixels，DPI是326,设备高度为480px。

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

因此，只需要判断iPhone手机的device-height（设备高度）值就可以了。

解决方法：

一、通过css3的Media Queries特性，在css3中可以直接写

@media（device-height：480px）and(-webkit-min-device-pixel-ratio:2){...}

/*兼容4/4s*/

@media（device-height：568px）and(-webkit-min-device-pixel-ratio:2){...}

/*兼容5*/

二、单独样式表，放在<head>标签里面