iOS视网膜(Retina)屏幕的适配方法
来源:互联网 发布:js中的单例模式 编辑:程序博客网 时间:2024/04/29 09:44
转自:http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-screen.html
版权声明:转载时请以超链接形式标明文章原始出处和作者信息
本文链接:http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-screen.html
作为一枚手机客户端PM,适配视网膜屏幕是一项需要掌握的基础知识,了解这个有助于和开发、设计师进行沟通,便于向设计师提出UI需求,从而在产品中良好的支持Retina屏幕。
一、支持视网膜(retina)屏幕的设备
设备
分辨率
屏幕尺寸
长宽比
解析度
iPod Touch 4
640×960
3.5"
3:2
326ppi
iPhone 4
640×960
3.5"
3:2
326ppi
iPhone 4S
640×960
3.5"
3:2
326ppi
The New iPad
2048×960
9.7"
4:3
264ppi
二、之前的设备
设备
分辨率
屏幕尺寸
长宽比
解析度
iPod Touch 1/2/3
320×480
3.5"
3:2
163ppi
iPhone、iPhone 3G、iPhone 3GS
320×480
3.5"
3:2
163ppi
iPad 1/2
1024×768
9.7"
4:3
132ppi
三、适配的方式
从上面的设备参数来看,iOS视网膜屏幕的设备,是在同等尺寸上,支持的分辨率的宽和高各增加了一倍,解析度(每英寸像素数)增加了一倍。
即显示在同样尺寸的空间上,所需要的图片素材的尺寸需要增加一倍,具体到实践上面有两个要点:
3.1.原生控件中图片素材的支持
√ 需要在非Retina屏幕的图片素材基础上,额外提供宽和高各一倍的图片素材
√ 命名上需要命遵从如下命名规则:假定非Retina屏幕的图片素材为filename.png,则需要将宽和高各一倍的图片素材命名为filename@2x.png
注意:@2x必须小写
举例如下,在此实例中,非Retina屏幕中,会调用allNotesTabItem.png,在Retina屏幕中,会调用allNotesTabItem@2x.png,但因为解析度的缘故,显示的物理尺寸仍然是同样大小。
类型
图片
尺寸(px)
命名
非Retina
24×24
allNotesTabItem.png
Retina
48×48
allNotesTabItem@2x.png
3.2.web控件中图片素材的支持
√ 只需要宽和高各增加一倍后的图片素材
√ 在webview的样式中,指定此图片的widht=50%、height=50%,或者指定绝对像素值为实际像素值的一半。
举例如下,在此实例中,图片会显示为真实图片的宽高各一半大小,但在Retina上不会模糊和有颗粒感。
类型
图片
尺寸(px)
样式
Retina
48×48
<img width="24" height="24" src="allNoteTabItem.png" />
或
<img width=50% height=50% src="allNoteTabItem.png" />
(完)
- iOS视网膜(Retina)屏幕的适配方法
- iOS视网膜(Retina)屏幕的适配方法
- iOS视网膜(Retina)屏幕的适配方法
- 用过Retina视网膜屏幕的笔记本电脑的后果
- 关于retina视网膜显示的知识总结
- 走向视网膜(Retina)的Web时代
- ios 屏幕适配方案
- Android的屏幕适配方法
- android屏幕的适配方法
- Android 屏幕的适配方法
- Ios中的普通屏幕和retina屏幕的了解
- 视网膜屏 retina屏
- Android屏幕适配方法
- Android屏幕适配方法
- 报道称:配备Retina视网膜的iPadmini将延误上市
- IOS-设备屏幕及适配方案
- 视网膜屏幕
- Unity3D关于UIRoot的屏幕适配方法
- 《拆掉思维里的墙》摘录
- 解决ssh的"Write failed: Broken pipe"问题
- 配置SQL Server Session方法
- hdu 1404 Digital Deletions
- 实现模式 -- Implementation Patterns
- iOS视网膜(Retina)屏幕的适配方法
- 拦截导弹 南工79
- poj1113——Wall(计算几何凸包)
- 第一次培训的总结。
- 错排公式
- 各种距离定义与理解
- U-boot 编译学习---编译命令
- Denuo DirectUI XML配置文件的节点
- SQLServer2000同步复制技术实现步骤