iPhone屏幕适配，历史及现状(http://hjcapple.github.io/2014/10/10/iphone-screen.html)

iPhone屏幕适配，历史及现状

 

初代iPhone

2007年，初代iPhone发布，屏幕的宽高是320×480像素。下文也是按照宽度，高度的顺序排列。这个分辨率一直到iPhone 3GS的也保持不变。

那时编写的iOS应用程序的（应用程序），只支持绝对定位。好比一个按钮（X，Y，宽度，高度）=（20，30，40，50），就表示它的宽度是40像素，高度是50像素，放在（20，30）像素的位置。

iPhone 4

2010年，iPhone 640×960像素。

这样就出现一个问题，怎么让原有的App运行在新的手机上面？iPhone手机一个优点，就是有众多优秀的App，假如不兼容原有的App，就至关于放弃这个得来不易的优点，是很不明智的。

每当iPhone的屏幕有所变化，好比iPhone 3GS的过渡到iPhone 4，iPhone 4的过渡到iPhone 5，iPhone 5过渡到iPhone 6，苹果公司都须要想办法来解决上述的兼容问题。

为了运行以前的App，引入一个新的概念point(点)。点这个概念在iOS开发中十分重要，而实际用户不多关注。iPhone 4屏幕尺寸继续保持320×480，不过单位并不是是像素，而是点。

• 在iPhone 3GS的中，1个点等于1个像素。也就是说，点跟像素能够直接互换。
• 在iPhone 4中，1个点等于2个像素。

这篇文章中，我将点和像素当成一维的长度单位，而非二维的面积单位，这样对于我来讲更天然些，所以1个点等于2个像素。别的文章中可能会说1个点等于4个像素，实际上是指1个点占据了4个像素的面积，这样也没有说错，注意上下文语境。

iPhone 4和iPhone 4在单位英寸上像素更多，看起来更细腻。

开发iOS版的时候，使用点做为基本单位会更加方便列表。对比

机型	屏幕宽高，单位点	屏幕模式	屏幕对角线长度
iPhone 3GS的	320×480	1X	3.5英寸
iPhone 4	320×480	2倍	3.5英寸

这里的屏幕模式能够初步理解成，一个点等于多少个像素。2x，就是1个点等于2个像素。

总结一下单位

• 手机屏幕的物理长度，使用英寸做为单位。好比iPhone 4的屏幕是3.5英寸，iPhone 5是4英寸，6 iphone 4.7是英寸，这里的数字是指手机屏幕对角线的物理长度。

• 屏幕像素，好比iPhone 3GS的屏幕是320×480像素，iPhone 4是640×960像素，这里的像素能够想象成屏幕上真正用来显示颜色的发光小点。

• 点，开发App时候使用的单位，是一个虚拟的单位，并不是实际存在的，所以点有时也叫虚拟点。点这个单位，用于屏蔽各个屏幕设备的不一样，兼容之前的程序。

每英寸有多少个像素，称为PPI（每英寸像素）.iPhone 4的屏幕是640× 4的屏幕叫做视网膜显示屏.Retina在英文中，是视网膜的意思。

iPhone 4以后（X，Y，宽度，高度）=（20，30，40，50），就表示高度为40个点，宽度为50个点，放在（20，3GS的应用程序，不用修改也可运行在iPhone 4上面。

文字，颜色等是矢量数据，放大不会失真。原有的iPhone 3GS的程序，在iPhone 4上面运行，文字显示也十分清晰。

而图片并不是矢量数据，处理方式有所不一样。假设图片example.png，大小为30× 3GS和iPhone 4中使用时候，都占据屏幕上30×40个点。而由于iPhone 4中1个点等于2个像素，也就是30×40像素的图片，占据了60×80像素的屏幕，所以这图片在iPhone 4中看起来就会模糊。

开发的时候，为使得图片清晰，须要进行图片适配。这时须要准备两张内容相同的图片，放在同一目录下。

example.png // 30×40像素 的例子@ 2 x.png // 60×80像素 

当程序中使用example.png的时候，会根据屏幕模式自动选择对应的图片。屏幕1x模式，就会选择example.png, 2X模式就会优先选择example@2x.png，假如example@2x.png不存在，就选择example.png。

图片跟屏幕同样，也有1倍模式，2倍模式。在iPhone 6加中，还出现3倍模式，原理是同样的。

当iPhone 4选中example@2x.png的图片，就会生成一张大小为30× ×40个点，1个模式的图片，看起来比较模糊。但它们占据的屏幕点数是同样的。

iphone 5

2012年，苹果发布iPhone 5，咱们将全部机型对比。

机型	屏幕宽高，单位点	屏幕模式	屏幕对角线长度
iPhone 3GS的	320×480	1X	3.5英寸
iPhone 4	320×480	2倍	3.5英寸
iphone 5	320 * 568	2倍	4英寸

跟iPhone 4作比较，iPhone 5的宽度保持不变高度增长568 - 480 = 88个点。

在iOS开发中，44这个数字比较特殊。iOS界面指南写着，人类的手指有必定大小，点击区域低于44个点的时候，就难以点中。44的两倍就是88。

当原有程序没有适配iPhone 5的时候，也能够正常运行，但多出来的88个点将会将会被自动均分为上下两部分，使得上下出现黑边。我找不到好看的图片。

那么怎样才能告诉iOS的系统，应用程序已经适配了iPhone 5呢？在这里，咱们先扯开一下，谈一下启动图片。

点击主屏幕的图标，进入App的时候，会当即显示一张图片，这张图片就是启动图片(Launch Image)。App在正式启动的时须要作一些初始化处理，这一般比较费时。先出现启动图片，可使用户以为系统当即有响应，减小等待的焦虑感。

每一个机型，好比同时支持iPhone和iPad的程序，须要分别为iPhone跟iPad指定启动图片。当旧的iPhone 4的程序，运行在iPhone 5上面，没有iPhone 5的启动图片，就采用兼容模式，上下留黑边。当为iPhone 5指定了新的启动图片，系统就认为这个应用程序是已经适配了iPhone 5的，上下就不会留黑边了。下面是微信启动图片，应该都很熟悉了。

微信启动图片中出现的那个地球，叫蓝色弹珠（蓝 5，相比与iPhone 4，很明显狭长了。

中间一大块用于显示的内容区.iPhone 4跟iPhone 5的对比。

自动版式

到了这个时候，传统绝对定位的弱点就显露出来了。这时iPhone按照点做为单位，已经出现了两种不一样尺寸的屏幕，算上iPad,就有3种尺寸（有些应用能够同时兼容iPhone和iPad上，称为通用型）。

从iOS版6系统发布后，iOS开发中能够采用一种AutoLayout的技术。AutoLayout就像网页同样，指定View，Button，Text之间的相对位置，好比靠左多少，靠右多少，居中多少等等。举个例子，像下面的简单布局。

假设左上角的区域为厂景，右上角的区域为view2的，下面的区域为view3.AutoLayout会说：

view1.left = 20 //视图1的左边距离边界20个点 view1.top = 20 //视图1的上边距离边界20个点  view2.right = 20 //视图2的右边距离边界20个点 view2.top = 20 //视图2的上边距离边界20个点 view2.left = view1.right + 20 //视图2的左边距离视图1右边20个点 view2.width = view1.width //视图1的宽度等于视图2的宽度 view2.height = view1.height //厂景高度等于view2的高度  view3.left = view1.left // VIEW3的跟厂景左对齐 view3.right = view2.right // VIEW3跟视图2对齐向左向右 view3.top = view1.bottom + 20 // VIEW3的上边距离厂景下边20个点 VIEW3 .bottom = 20 // VIEW3下边距离边界20个点 view3.height = view1.height // VIEW3高度等于厂景高度 

指定上面的约束条件后，AutoLayout就会自动算出对应的布局。上面我写得比较繁琐，事实上不少操做都是可使用鼠标拖拉来指定的，并不必定须要使用代码。但就算用代码，也有简写的方法。下面是在xib中，拖拉鼠标指定约束时的界面。

而绝对定位，会直接说

view1.frame =（X1，Y1，宽度1，height1） view2.frame =（X2，Y2，宽2，身高2） view3.frame =（X3，Y3，width3，height3）

绝对定位并不是指定约束条件，而是开发者本身来精确指定视图，按钮，文本等的实际坐标大小。

对于一个屏幕，绝对定位可能跟AutoLayout的区别不算大，甚至绝对定位会更方便些。但当须要同时适配多个屏幕，AutoLayout根本不须要更改。而绝对定位就须要根据屏幕大小，一个个算出来。好比横屏，在AutoLayout下面，就自动变成。

这里不过是3个控件的布局，当出现的控件数越多，屏幕尺寸越多，AutoLayout的优点就显露出来了。另外AutoLayout有个好处是容易支持多语言，不一样语言下，同一个意思文字的长度是不一样的，使用AutoLayout也能够自动适配。

在iOS 6中的时候，自动版式还比较少人使用，当时屏幕尺寸还比较少.IOS 7的时候，就开始不少人使用了。而到如今的iOS 8了，更加上iPhone 6，iPhone 6加须要适配，自动版式大势所趋，不用不行了。

iPhone 6，iPhone 6加

2014年，iPhone 6，iPhone 6加发布后，状况又有新的变化。再次比较全部iPhone机型。

机型	屏幕宽高，单位点	屏幕模式	屏幕对角线长度
iPhone 3GS的	320×480	1X	3.5英寸
iPhone 4	320×480	2倍	3.5英寸
iphone 5	320×568	2倍	4英寸
iPhone 6	375点¯x667	2倍	4.7英寸
iPhone 6加	414×736	3倍	5.5英寸

屏幕尺寸再度分裂。可是咱们比较iPhone 5的跟iPhone 6的宽高比例。

机型	屏幕宽高比
iphone 5	320÷568 = 0.563
iPhone 6	375÷667 = 0.562
iPhone 6加	414÷736 = 0.5625

能够看出，iPhone 6跟iPhone 5虽然屏幕尺寸改变了，可是它们的比例是不变的。都是9÷16 = 0.5625的屏幕。

当旧的iPhone 5的程序运行在iPhone 6上面，假如没有通过适配。旧程序自动等比放大，铺满新手机，旧程序也能够正常运行。这种方案可算是自动适配。但由于旧程序拉伸了，总体看起来有点虚，也不能更好利用大屏空间。

当须要开发者手动适配的时候，跟iPhone 4过渡到iPhone 5同样，在新程序中，指定一张新的启动图片。当指定了启动图，屏幕分辨率就已经变成应有的大小，这时候利用AutoLayout进行布局，同一份代码，就能够支持多个机型。新手机的屏幕更大，有更多的虚拟点，能够显示更多的内容。

值得注意一点是，iPhone 6加。它的宽高是414×736个点，3个模式，理想上来讲，应该有1242×2208像素。但iPhone 6加的实际像素是1080×1920，是比理想值要少一点的.iPhone 6 Plus的处理方式是将程序总体稍微缩小一点。分辨率很高，这点区别，实际上也看不出来。

那为何须要这样作呢？上面表格中iPhone 6，iPhone 6 Plus屏幕宽高的逻辑点的数字是怎么来的？下面我猜想一下缘由，但不能证明。

先看iPhone 6，这个比较简单.iPhone 6的屏幕宽高比例跟iPhone 5同样，使用对角线来计算，就是放大了4.7÷4 = 1.175倍。用这个数字，乘以iPhone 5的的320×568个点，忽略偏差，差很少就是iPhone 6屏幕的375点¯x667个点。这里须要注意，屏幕宽高比例同样，才能使用对角​​线来计算。

按照上面的方式来计算iPhone 6此外，应该是获得440点¯x781个点，实际上倒是414×736个点。这里我猜想是由于，iPhone 6 Plus屏幕明显更大，相同尺寸的点放在大的屏幕上面，会使得人感受尺寸变小，因此就将每一个点的实际尺寸放大一些，从而获得更少的点数目。人眼看东西会有种错觉，并不是是孤立地看，而是会跟周围的环境做比较。

肯定了点数目以后，再肯定了像素1080× ×2208,3x下也能够精确到1：1，

上述只是猜想，我相信那些手机参数是通过反复考虑再肯定的.iPhone 6加这个处于手机跟平板中间地带的产物通过很多特殊处理。

由分析能够看到，慢慢的为了适配多个机型，程序的启动图片也逐渐增多，为解决这个问题。iOS 8以后，可使用xib来搭建启动界面，这样就能够同一个启动界面，适配多个机型，减小启动图片占用的空间。

建议

• 之后的应用程序，都使用自动版式，不要再用绝对定位。

• 使用相似网页的方式来设计界面。

• 设计师好，程序员也好，尽可能使用点这个单位进行思考，而不要使用像素。好比，你须要作44 X 66个点的按钮​​，2个模式，就乘以2， 3x模式就乘以3。这样的思考方式能够大体估计到真实的物理长度。44个点，就是手机上导航栏，工具栏的高度。假如用像素思考，容易使得作出的图片过大或者太小。

• 非矢量素材，就能够作尺寸最大的，以后再进行缩小。好比你须要兼容3x的屏幕，就直接作最高那种图片。

• 而当使用Flash之类的矢量工具来作素材的时候，应该直接作点那个尺寸。好比44 X 66个点的按钮​​。就创建一个44点¯x 66的场景。以后再导出成2倍图，3倍图，由于矢量放大不失真。不要创建一个3x的场景，导出成大图片，再进行缩小，这样就容易失真。更理想的是直接使用矢量图。

• 假如是那种导航栏，工具栏之类的背景图，须要横跨整个屏幕。能够只切一小块，让程序拉伸，拉伸方式是保持两边的像素不动，只拉伸最中间的一列像素。须要拉伸的话，横方向就不要出现一些渐变色。

• 按钮的点击区域，不该该少于44个点，就算按钮的图片看起来比较小，也应该使得点按钮周围的透明区也有反应。

• 5，能够按照iPhone 5的尺寸，320×568个点，须要兼容iPhone 6 6加的横屏模式，须要另外处理。

• 上面说的是应用的处理方式，游戏会有些特殊。暂时如今不少游戏，按照1136点¯x 1X模式下尺寸是1024×768像素，iPhone 5在2倍模式下，是1136×640。这种尺寸，能够简单将场景居中显示，各自将场景拉伸到最大