iOS视网膜(Retina)屏幕的适配方法
2012-07-05 10:13
375 查看
转自: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屏幕。
从上面的设备参数来看,iOS视网膜屏幕的设备,是在同等尺寸上,支持的分辨率的宽和高各增加了一倍,解析度(每英寸像素数)增加了一倍。
即显示在同样尺寸的空间上,所需要的图片素材的尺寸需要增加一倍,具体到实践上面有两个要点:
3.1.原生控件中图片素材的支持
√ 需要在非Retina屏幕的图片素材基础上,额外提供宽和高各一倍的图片素材
√ 命名上需要命遵从如下命名规则:假定非Retina屏幕的图片素材为filename.png,则需要将宽和高各一倍的图片素材命名为filename@2x.png
注意:@2x必须小写
举例如下,在此实例中,非Retina屏幕中,会调用allNotesTabItem.png,在Retina屏幕中,会调用allNotesTabItem@2x.png,但因为解析度的缘故,显示的物理尺寸仍然是同样大小。
3.2.web控件中图片素材的支持
√ 只需要宽和高各增加一倍后的图片素材
√ 在webview的样式中,指定此图片的widht=50%、height=50%,或者指定绝对像素值为实际像素值的一半。
举例如下,在此实例中,图片会显示为真实图片的宽高各一半大小,但在Retina上不会模糊和有颗粒感。
(完)
版权声明:转载时请以超链接形式标明文章原始出处和作者信息
本文链接: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 |
√ 只需要宽和高各增加一倍后的图片素材
√ 在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)屏幕的适配方法
- iOS重新定义系统自带的方法,如 重定义 CGRectMake 和 CGPointMake 可以解决屏幕适配的问题
- iOS重新定义系统自带的方法,如 重定义 CGRectMake 和 CGPointMake 可以解决屏幕适配的问题
- 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
- iOS里面的屏幕适配(两种方法)
- ios中object c纯代码开发屏幕适配处理方法
- iOS设计中不同屏幕适配的方法-登陆界面
- 移动端视网膜(Retina)屏幕下1px边框线的解决方法
- iOS 适配iPhone X的方法
- IOS 截取屏幕截图方法
- iOS 屏幕适配,autoResizing autoLayout和sizeClass图文详解
- 简单适配3.5寸,4寸iPhone屏幕的方法
- 一种终端应用动态适配智能终端屏幕的方法及系统
- ios屏幕适配
- iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法
- 几行代码帮你轻松完成ios屏幕适配
- IOS-设备屏幕及适配方案
- iOS的屏幕适配之Autoresizing、Autolayout、VFL、Mason 4000 ry