[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法
来源:互联网 发布:防辐射眼镜 知乎 编辑:程序博客网 时间:2024/06/05 19:25
摘要:
[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{}}
方式二,链接到一个单独的样式表,把下面的代码放在标签里
<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 5isPhone4inches = (window.screen.height==480);isPhone5inches = (window.screen.height==568);
0 0
- webkit移动开发笔记之兼容iPhone4和iPhone5的方法(转)
- [webkit移动开发笔记]之兼容iPhone4和iPhone5的方法
- iphone4 和 iphone5 兼容
- ios iPhone5和iPhone4的屏幕兼容
- 关于iphone5和iphone4兼容的尺寸问题
- ios开发 界面适应iphone4和iphone5
- iphone5和iphone4的屏幕兼容问题
- iPhone5和iPhone4的屏幕兼容问题
- iPhone5和iPhone4的屏幕兼容问题
- 兼容iPhone5分辨率的简单方法
- iPhone5和4的屏幕兼容
- iphone4s和iphone5屏幕尺寸的兼容
- iPhone4和iPhone5适配代码分享
- css媒体查询iphone4和iphone5
- [webkit移动开发笔记]之禁止触发系统默认菜单
- iphone4到iphone5的屏幕自适应问题
- 用继承的方法去判断iPhone4与iPhone5的背景图
- 转载 兼容iphone5开发获取屏幕分辨率的问题
- C#在一台客户端进行了某个操作以后如何让其他不同的客户端如何实现相同的操作(二)
- 51nod 1284 2 3 5 7的倍数
- Universal-Image-Loader源码阅读(16)-memory/impl/FuzzyKeyMemoryCache
- BZOJ 1030 [JSOI2007]文本生成器
- java web 纯前段实现浏览网页下载
- [webkit移动开发笔记]之兼容iPhone4和iPhone5的方法
- 使用spring的@Async异步执行方法
- 使用ajaxfileupload的一点心得
- GraphicsMagick、命令行使用示例
- 前端工程师需要的技能以及部署流程
- JNA 如何接收C层返回的char**数据
- 也来说说touch事件与点击穿透问题
- PHP安装使用记录
- Time之游戏暂停功能