【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法-白红宇

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

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

摘要：

[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{
     }}/* 上面的写法合并后 */@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2),(device-height:568px) and (-webkit-min-device-pixel-ratio:2){
    /* 兼容iphone4/4s5/5 */ .class{
     } }

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

使用JS

//通过高度来判断是否是iPhone 4还是iPhone 5isPhone4inches = (window.screen.height==480);isPhone5inches = (window.screen.height==568);

移动开发发展飞猛，各种新的设备也不断的出现，我们在向后兼容的同时，也需要不断术向前学习，赶上时代步伐~

参考资料：

作者：白树

出处：