1x像素尺寸 ios

2015-07-27 15:32:03 M_nao 阅读数 26729

    1x,2x就是用于非Retain屏幕和Retain屏幕,3x现在用于iPhone6 Plus,在iPhone实际开发中,只有iPhone4 是非Retain屏幕,市场占有率很低,因此在切图时,只切@2x和@3x图片即可。以iphone 6做UI为例,如果图片大小为200*200px,例如图片命名为test_a@2x.png,那么还应切一张命名为test_a@3x.png的300*300px的图片来适配iPhone 6Plus。这样程序在运行时就能根据不同设备自动调用不同图片,从而达到最佳效果。

附一张原理图:


2016-11-13 01:39:05 liangliang2727 阅读数 7154

iOS开发:分辨率像素你知多少

iPhone屏幕尺寸和分辨率方面的一些小姿势 20160303

iPhone设备现在有多种分辨率,如下表所列,

设备 屏幕尺寸 分辨率(pt) Reader 分辨率(px) 渲染后 PPI(DPI)
iPhone 3GS 3.5寸 320 x 480 @1x 320 x 480 163
iPhone 4/4S 3.5寸 320 x 480 @2x 640 x 960 326
iPhone 5/5S/5C 4.0寸 320 x 568 @2x 640 x 1136 326
iPhone 6/6S 4.7寸 375 x 667 @2x 750 x 1334 326
iPhone 6/6S Plus 5.5寸 414 x 736 @3x 1242 x 2208 1080 x 1920 401

刚开始看见上面的表格时候,我有三个疑问,

  1. DPI和PPI是什么意思?

  2. pt和px是有什么不同?

  3. iPhone 6/6s Plus分辨率是1242 x 2208,为何渲染后分辨率变为1080 x 1920?

针对以上三个问题,我遵循内事不决问百度,外事布局问谷歌的原则,在网上找了一些答案,以下是简单的解答。

1. DPI和PPI是什么鬼?

DPI(Dots Per Inch)最初用于衡量打印无上每英寸的点数密度,就是说你的打印机可以在一英寸内打多少个点。DPI值越小,图片越不惊喜。

当DPI的概念用在计算机屏幕上时候,就应该称之为PPI(Pixels Per Inch)。同理:PPI就是计算机屏幕上每英寸可以显示的像素点的数量。

Windows系统默认PPI是96,Mac OS系统默认PPI是72.一般费视网膜屏幕的桌面电脑的PPI在72到120之间,使用72到120之间的PPI进行设计基本可以保证你的作品在大多数情况下看起来都差不多。

举个栗子来说:27寸Mac的PPI是109,也就是每英寸有109个像素。显示器宽度(含边框)为25.7英寸,屏幕纯宽度差不多是23.5英寸,所以23.5 x 109 = 2560,由此可见屏幕的分辨率为2560 x 1440px。

视网膜屏幕与PPI:视网膜屏幕是在iPhone4发布时进入大众视野的,叫视网膜是因为屏幕的PPI高到人的肉眼无法看到像素点。从技术上来说就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素,如下图所示,


这种情况下,不苏傲笑元素的大小,相同尺寸屏幕上的元素精度提高了2倍。原来一个像素的空间现在有4个像素,像素是原来的4倍。

iPhone 4采用Retina显示屏,在物理尺寸不变的情况下,像素成倍增加,达到了640 x 960像素。这样就出现了一个问题,怎样让原有的App运行在新的手机上面?为了运行之前的App,苹果公司引入了一个新的概念point(点),点这个概念在iOS开发中十分重要,而开发者很少关注。iPhone 4屏幕尺寸继续保持320 x 480,不过单位并非是像素,而是点。

iPhone 3GS中,一个点等于一个像素,也就是说点跟像素可以直接互换;在iPhone 4中,一个点等于两个像素;在iPhone 6 Plus中,一个点等于3个像素。

iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的,都是3.5英寸。同样一个点,实际上看起来是一样的,只是iPhone 4在单位英寸上像素更多,看起来更加细腻。

2. pt和px有什么不同?

pt(Point)代表点,px(Piexl)表示像素,这是两个看起来很像、却完全不一样的单位,在某些场合它们是1:1的,在很多时候却常常被搞混,或是制作过程根本没有分清楚、导致结果不准确。在绘图软件里面可以看到基本单位设定里面就有这两个选择,


px,即是pixel,表示像素。是屏幕上所显示的最小单位,在分辨率高的屏幕上,一个像素可能会达到肉眼无法识别的大小,


pt,即是point,是一个标准的长度单位,定义上1pt = 1/72英寸,英雌他跟我们所熟悉的公分、公尺一样,可以明确的指出1pt的长度是多少,


pt也是常见的标识文字尺寸的单位,在绘图以及文书软件等几乎都是使用pt作为字体标尺的单位,故一般称呼[字级]时候,通常即是指pt。

pt和px理解青睐其实并不难,在应用的时候也相当单纯,在大部分的情况下适用的一个理论是:当设计的目的是用于供屏幕浏览,则趋向于使用px以方便掌握细节;而如果是为了做输出打印的需求,使用pt则是较好的选择。

iPhone 3GS时代,分辨率和点是1:1,到了iPhone 4,分辨率和点是2:1的关系,而在iPhone 6 Plus设备上,分辨率和点事3:1,所以为了方便开发人员开发,iOS中统一使用点(Point)对界面元素的大小进行描述,这样分辨率的差异对于开发者来说就不是问题了,在开发层面来说,开发者无需进行分辨率和点的单位换算,完全感觉不到点和分辨率的差异。

当我们说一个iPhone设备的分辨率时候,实际上我们是用的pt(点)作为描述分辨率的单位;当我们和UI讨论图片的尺寸时候,实际说的是px(像素)来作为描述图片的单位。

3. iPhone 6/6s Plus分辨率是1242 x 2208,为何渲染后分辨率变为1080 x 1920?

iPhone 6 Plus除外,其他所有iPhone的PPI是一致的,都是326,用@2x素材。

但是iPhone 6 Plus的实际PPI是401,理论上苹果应该用401 / 326 x @2x = @2.46x的素材,但是这个奇葩的臂力对于开发者而言很难切图,所以苹果为了方便开发者就采用了@3x的素材,然后再缩放到@2.46x的屏幕上,也就是缩放到2.46 / 3 = 83%,实际上苹果选取了一个接近比例的87%。这样算下来,物理分辨率和虚拟分辨率的比率是87%,也就是1080 / 0.86 = 1242,1920 / 0.87 = 2208。好处是开发者更方便,比如准备素材时候,字号可以直接调整为3x的。

让我们再来看一下不同iPhone设备的分辨率和像素的对照表,

手机 pt px PPI(DPI)
iPhone 4/4S/5/5S/5C/6 10 20 326
iPhone 6/6S Plus 10 30 401

对于iPhone 6 Plus之前的手机,pt和px的比例是1:2,而iPhone 6 Plus出来之后,这一比例达到了1:3,同时分辨率达到了1242 x 2208(使用iPhone 6 Plus截屏,再上传到电脑看,就是这个分辨率),而iPhone 6 Plus实际分辨率为1080 x 1920,分辨率的比率为1.15:1。对于ppi,iPhone 6 Plus之前均为326,而之后变为401。

素材资源发生的变化@3x,在实际开发中,素材通常是UI美眉负责提供,从@2x到@3x,素材的分辨率提高了1.5倍,例如一个@2x的素材大小为44x44,那么响应的@3x大小分辨率为66x66,文件命名的方式依然没变,$(IMG_NAME)@3x.png,命名好的文件丢入资源文件夹内,只要代码报纸一直,文件名称不变即可。

2018-08-21 11:49:38 lvshitianxia 阅读数 1985

iPhone X 5.8 英寸、2436 x 1125 像素分辨率,这些意味着iPhone X 需要适配自己尺寸的启动图片。博主在开发者网站找到了各个设备较详细的启动图尺寸:

 

启动图尺寸

官方原文:https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/

效果如下:

iPhone X 启动图


 

2015-06-29 20:18:05 Bruce__Liu 阅读数 2180

设备                 系统          点(points)     屏幕尺寸        倍数   像素

iPhone

iPhone 2GS      IOS 1      320*480        3.5英寸         1x    320*480

iPhone 3G        IOS 2      320*480        3.5英寸        1x    320*480

iPhone 3GS      IOS 3      320*480        3.5英寸        1x    320*480

iPhone 4           IOS 4      320*480       3.5英寸         2x    640*960

iPhone 4s         IOS 5      320*480        3.5英寸         2x    640*960

iPhone 5           IOS 6      320*568        4.0英寸        2x    640*1136

iPhone 5s/c      IOS 7      320*568        4.0英寸        2x    640*1136

iPhone 6           IOS 8      375*667        4.7英寸        2x    750*1334

iPhone 6plus     IOS 8      414*736        5.5英寸       3x    1242*2208(1080*1920)


IPod Touch

IPod Touch1G   IOS 1      320*480        3.5英寸           1x    320*480    

IPod Touch2G   IOS 2      320*480        3.5英寸           1x    320*480    

IPod Touch3G   IOS 3      320*480        3.5英寸           1x    320*480    

IPod Touch4G   IOS 4      320*480        3.5英寸           2x    640*960

IPod Touch5G   IOS 6      320*568        4.0英寸           2x     640*1136

IPod Touch6     IOS 8      320*568        4.0英寸           2x     640*1136


iPad

iPad                  IOS 3      1024*768          9.7英寸           1x  1024*768

iPad2                IOS 4      1024*768          9.7英寸           1x  1024*768

iPad3(New iPad)IOS 5      1024*768          9.7英寸           2x  2048*1536

iPad4                IOS 6      1024*768          9.7英寸           2x  2048*1536

iPad Air             IOS 7      1024*768          9.7英寸           2x  2048*1536

iPad Air2           IOS 8      1024*768          9.7英寸           2x  2048*1536


iPad mini

iPad mini           IOS6        1024*768         7.9英寸           1x  1024*768

iPad mini2         IOS7        1024*768         7.9英寸           2x  2048*1536

iPad mini3         IOS8        1024*768         7.9英寸           2x  2048*1536

2016-04-14 23:07:33 sinat_34194127 阅读数 8928

1x 、2x 、3x图片介绍

手机屏幕分两种

  1. 视网膜屏:
    • 又叫Retain屏幕,就是高清视网膜屏幕,分辨率宽高是标准屏幕分辨率的2倍
  2. 非视网膜屏
    • 又叫非Retain屏,是标准分辨率

分辨率

  • 概念:分辨率的意思就是把屏幕进行横向、纵向等分,通常描述手机屏幕用来表示,在retina屏幕下,一个点表示两个像素,在非retina屏幕下,一个点表示一个像素,而像素,就是常说的分辨率,在iPhone6 Plus下,一个点表示3个像素

iPhone手机的分辨率


  • 在上图可以看出
    1. iPhone3GS的手机,是非视网膜屏幕,它的点 和 分辨率 是相同的,也就是两者相除 得 1
    2. 在iphone4/4S/5/5C//5S/6,它们都是视网膜屏幕,分辨率正好是点的两倍,相除得2
    3. 而在iPhone6 Plus,虽然也是视网膜屏幕,但是分辨率是点的三倍,也就是相除得3

1x 2x 3x 图片

  • 由于不同手机的屏幕的分辨率和它的点的倍数,是不同的,所以我们在实际开发中需要准备多套图片
  • 由于目前只存在1倍,2倍,3倍,这几种,所以目前准备的图片就分 1x,2x,3x图,当然由于只有3GS手机才是1x图,而3GS手机,基本上已经无人使用,可能很多公司已经不再去制作1x图片

图片的命名规则:

  • 1x图片: 直接使用文件名 btn_left.png
  • 2x图片: 在文件名后加上@2x标识 btn_left@2x.png
  • 3x图片: 在文件后加上@3x标识 btn_left@3x.png

总结

  1. 在同样一个尺寸的屏幕下由于使用的屏幕不一样(retina和非retina),所以造成的屏幕分辨率会不同.也就是说,同样是30*30的像素,在3.5 inch大小的屏幕上,如果是非retina显示会大一些,retina屏幕显示会小一些。
  2. 在开发中使用的是点.(比如 30 * 30 ,不是表示30像素,而是表示30点,这样的话iOS系统会自动把点转换为对应的像素)
    • 非retina屏幕1个点表示1像素
    • retian屏幕1个点表示2像素
    • iPhone6 Plus 下1个点表示3像素
  3. 因为程序中的是,iOS系统会自动把点转换为不同的像素去找图片,所以图片对应的也要准备多份不同的图片,
    • @2X:视网膜屏幕,在原来点坐标的大小上乘以2
    • @3X:在原来的坐标的大小上乘以3

iOS tabbar 图片尺寸

阅读数 1838