【原】[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>标签里

<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 5
isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);

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

参考资料：

iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

在iPhone 4上为视网膜显示屏优化网页图片

 

posted @ 2013-03-21 10:43  白树  阅读(6109)  评论(2)  编辑  收藏  举报

Copyright 2011- | 网站统计：腾讯分析