iphone4 和 iphone5 兼容
2013-03-21 16:11 三戒1993 阅读(105) 评论(0) 编辑 收藏 举报
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{} }
方式二,链接到一个单独的样式表,把下面的代码放在<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