【原】[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上为视网膜显示屏优化网页图片

 

作者:白树

出处:http://peunzhang.cnblogs.com/

时间: 2016-04-29

【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法的相关文章

【原】[webkit移动开发笔记]之空链接是使用javascript:void(0)还是使用#none

基于webkit内核的移动开发笔记,之前已经写过4篇,主要是关于移动开发重构的分享,今晚有空了再写一篇. 回忆去年年底最后的一个项目,还有一个很怪异的bug,让项目团队的成员感到十分头疼.测试组的同事做完最后的测试回归后,项目发布上线,并通过微信推送链接.在ios系统中(android显示正常),微信内页打开链接后,点击页面的一个按钮,页面被重新加载了,这时才可以对页面进行其它操作. 再次不断测试后,我们这边的同事肯定是微信软件内部配置引起的,可是微信的同事也无法定位具体的问题......纠结了

【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框

去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结. 在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景:对于android则出现红色的边框.对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的.可惜带来了体验的同时,也带来了bug...... 主要是在a

【原】[webkit移动开发笔记]之CSS3径向渐变

谈到渐变,大家并不陌生,设计稿中经常会遇到,其中最常见的也最平凡使用的是线性渐变和径向渐变,在pc端开发,很多大型网站都需要考虑所有浏览器的兼容,通常如渐变的按钮或者背景图一般会被重构师们切成图片,而在移动开发中如果使用图片是很占流量,能不用图片尽量不使用,那么,CSS3来实现无图的渐变效果是首选的. 本文以移动开发中遇到的一个径向渐变例子,讲解CSS3径向渐变在项目中的应用和以及需要注意的地方.  一.径向渐变的基础知识 径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉).

【原】[webkit移动开发笔记]之使用chrome进行手机开发

Chrome浏览器,相信大家并不陌生,该浏览器是基于其他开放原始码软件所撰写,包括WebKit和Mozilla,以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,2012年8月6日,Chrome已达全球份额的34%,成使用最广浏览器. Chrome浏览器提供了非常简单方便的开发人员工具,方便我们在PC端做手机开发,那么如何是如何在PC上做简单的手机页面开发呢? 首先下载chrome最新版本版本 24.0.1312.56(有些旧版的缺少一些功能,建议更新到最新版本),然后在Chrome

【原】[webkit移动开发笔记]之禁止触发系统默认菜单

在手机webkit浏览器中,用户在某一些按钮上长按3秒钟后,会弹出一个系统的列表,ios和android各自展现不一样,列表可以有复制或在在新窗口打开的等操作,这种体验对于按钮来说是不需要的,按钮上是绑定事件,有特殊功能,而这里系统把它当做一个链接的意义.查看了代码,原来是一个a标签,链接地址为空. <a href="#" class="btn">查看余额</a> 找了资料后,ios平台有个解决办法 可以通过控制当前元素的-webkit-to

【原】[webkit移动开发笔记]之无法自动播放的audio元素

HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法.这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选. 一.audio的基本知识  audio:标签定义声音,比如音乐或其他音频流.  二.audio的属性 三.audio的写法 写法一: <audio src="baishu.mp3" auto loop>你的浏览器还不

Android开发笔记 改变字体颜色的三种方法_Android

1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textcolor="#FFFFFF"来变化颜色 但这样的效果只能让字体千篇一律的显示一种颜色 2.在activity中通过TextView tv=new TextView(this):实例化一个textview,通过setContentView(tv);将其加载到当前activity,设置要显示的内容String str="想要显示的内容":通过以下代码可以实现部分文本字体的改变,

【原】webapp开发中兼容Android4.0以下版本的css hack

话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了,看起来很简单,其实背后还有一个大坑等着你. 虽说是webkit内核,但页面的展现效果还会受到自身系统的影响,升级后的系统打了补丁,新增了新的属性,支持更多丰富炫丽的效果,那么旧的系统(未升级的)就不支持一些新的属性,开发哥哥就是没有做好低端版本兼容的话,就会产生所谓的bug的,再加上android

IOS开发笔记

1 iphone开发笔记 2 3 退回输入键盘 4 - (BOOL) textFieldShouldReturn:(id)textField{ 5 [textField resignFirstResponder]; 6 } 7 8 CGRect 9 CGRect frame = CGRectMake (origin.x, origin.y, size.width, size.height):矩形 10 NSStringFromCGRect(someCG) 把CGRect结构转变为格式化字符串: