一.应用图片标准iOS控件里的图片资源,苹果已经做了相应的升级,我们需要操心的是应用自己的图片资源.就像当初为了支持iPhone 4而制作的@2x高分辨率版本(译者:以下简称高分)图片一样,我们要为iPad应用中的图片制作对应的高分版本.我知道不少开发者很有预见性的早在iOS 5.0 SDK上就完成了这一步升级.可是我还是要强调一点,那就是之前 Michael Jurewitz (@Jury)在推上提到过的: — 如果想让你的高分图片显示在新iPad上,你必须用Xcode 4.3.1 连同iOS…

一.Retina显示屏简介 retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个. retina显示屏只是高清显示屏的一种 随着苹果的 retina显示屏推出以来,很多厂商也开始推出自己的高清显示屏,如三星手机.魅族手机.小米电视机等,而目前市场的移动设备大都是高清显示屏了,其实它们的显示原理都是来自苹果的 retina显示屏. 如小米3的高清显示屏,5英尺的屏幕下分辨率高达1920*10…

Retina 直接翻译是视网膜的意思.在IT上,是Apple 公司提出的.意思是指一个显示屏的颗粒度 px 密度高到人类无法看见.要了解细节必须先了解基础知识inch 英寸 1 inch = 2.52 cm手机的inch 以屏幕的斜线(左上角到右下角的长度)来计算ppi = pixel per inch 就是1 inch 里面有多少个像素,也可以当成密度来看待 .所以 ppi 越高越好.Retina屏幕对web的影响在Retina屏幕下照片会base on 设备的 window.devicePi…

便于理解,先来了解几个名词: dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率.一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分辨率,那么大屏幕比小屏幕的dpi小. dip(device independent pixels),设备独立像素,与160 dpi显示屏上的1px相等, 又称dp. dppx(dots per ‘px’),每px单位上的点数.由于CSS英寸与CSS像素的固定比是1:96,那么1dppx=96dpi.…

随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法: 一.用CSS替代图片 这一点在任何时候都适用:只是在当前我们可以更多的使用样式表来制作出设计效果,CSS3的圆角.渐变.模盒阴影.字体阴影能帮助我们处理绝大多数视觉效果,并且在各种分辨率下都有良好的表现. CSS Button 二.为高分辨率设备提供高清图片 如果必须使用图片,通常是准备2套图片,一套原始尺寸( 为普通设备准…

近年来,Apple在其旗舰设备上引入了Retina显示屏.根据Apple的说法,他的像素密度非常高,足以使人眼无法区分单独的像素. UIScreen类提供了一种容易的方式,用于监查当前设备是否提供了内置的Retina显示屏.检查屏幕的scale属性,它提供了从逻辑坐标空间转换为设备坐标空间的转换因子.对于标准显示屏,转换因子是1.0,因此1点对应于1个像素.对于Retina显示屏,它是2.0. -(BOOL)hasRetinaDisplay { return ([UIScreen mainScr…

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i…

感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得异常模糊,存在非常严重的分辨率兼容问题.自从 2010年6月,iPhone4 的上市开始,网页图片的显示兼容问题就已出现,经过几年的发展,配备 Retina 屏幕的电子产品越来越多,如今 Apple 又将 Retina 技术应用到了 Macbook Pro 上,网页图片在 Retina 屏幕下的显示…

前面有同学问到了iOS内存警告临界值和工程项目里AppIcon的一些配置信息,相信对刚入行的同学来说,可能都会碰到类似的问题,记录一下供后来者查询. 1.先简单说下AppIcon的图标的配置信息 1).在右边的App Icon勾选项,暂时只选择了支持iPhone iOS7.0 and Later, 表示这些icon只支持iPhone设备(包括iPod)的iOS系统最低7.0至最新系统: 2).2x图标表示支持在Retina显示屏上,3x图标表示支持在Plus屏幕尺寸5.5英寸上显示: 3).再看…

2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能差——页面操作卡顿 HTML5新技术多——学习成本不低 未知问题——坑多 面对这些问题,一开始我们只能在未知中试错,知道错误的方案才能更容易寻找正确的解决问题思路,2年多来,可看到移动web在业界不断趋向于成熟,各种框架和解决方案不断的涌现让移动端开发不再是个噩梦. 这几天把想到的一点经验先罗列出来…