2012年8月份刚开始接触前端移动开发，现在主要是android和ios系统的手机，一套代码需要同时兼容android和ios，就android而言已经有N个型号的手机，如果css代码在这些手机上解析有稍微差别或者出现bug，那么，做兼容是必不可少，事实上随着手机版本的不断更新，产生一些不同的体验，这也可以理解为制造了bug~

半年多了，遇到了不少问题，解决问题的过程即辛苦又很开心，辛苦是因为刚接触，很多知识都不懂，需要花费很多的时间去摸索遇到的困难，开心呢当然是接触到新鲜的手机开发，感到比较兴奋，学习了不少知识。好了，不多说，开始本次的主题，今天主要对iphone手机的兼容方法做总结。

摘要：

显示屏，iPhone 4的分辨率达到了640×960 pixels，不过为了保持向下兼容性，它采用的仍然是320×480 points。也就是说，在不进行缩放的情况下，显示普通图片时，它会用4个像素来显示图片中的1个像素;而在显示retina图片时，每个像素都对应图片中的1个像素。

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

，普通设备都是1，，有些。]

那么

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的代码~~

<div class="cnblogs_code">

{}{}<span style="color: #008000;">/<span style="color: #008000;"> 上面的写法合并后 <span style="color: #008000;">/<span style="color: #800000;">

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2),(device-height:568px) and (-webkit-min-device-pixel-ratio:2){<span style="color: #008000;">/<span style="color: #008000;"> 兼容iphone4/4s5/5 <span style="color: #008000;">/<span style="color: #ff0000;">

.class{}<span style="color: #800000;">

}