一、iphone尺寸规范

1、界面尺寸大小是：750x1334px。

2、状态栏(status bar)：就是电量条，其高度为：40px;

3、导航栏(navigation)：就是顶部条，其高度为：88px;

4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px;

5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

1、导航栏和工具栏尺寸大小44x44px；

3、导航栏的文字大小大值是34-36px，标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是：20px 24px，26px，28px，30px，32px，34px。

设置界面的图标高度和开关滑动按钮的高度：58px

在iPhone6的原型图上，统一成88px。在iPhone6设计稿中，88px是一个常用的设计尺寸。

搜索栏的高度，在iPhone6的原型图上，统一成58px。

在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30p x。

A、疏远距离：比如，所有元素距离手机屏幕左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

原型设计中，需要考虑不同屏幕尺寸的苹果手机，在@1x的情况下的适配情况。

1、iPhone5在@2x屏幕尺寸是，640x1136px;对应的@1x，屏幕尺寸就是320x568px;

2、iPhone6在@2x屏幕尺寸是：750x1334px;对应的@1x，屏幕尺寸就是375x667px;

3、iPhone6Plus在@3x屏幕尺寸是：750x1334px;对应的@1x，屏幕尺寸就414x736px;

iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介绍

1、iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸，也是安卓机目前流行的大屏设计稿尺寸。

2、iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x889px-@1x。

3、iPhone5是4英寸屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x757px-@1x。

二、iphone X 出来了,怎么做屏幕适配

这里用 iPhone 6举例子是因为大部分设计师都用 iPhone 6来做设计稿，方便大家理解，其实 iPhone 8也是这个分辨率。

iPhone 6：750×1334（375x667pt@2x）

iPhone X：1125px× 2436px(375pt× 812pt@3x)

在逻辑像素上 iPhone X的宽度和 iPhone 6保持一致，这是高度高了145pt（812-667），如果你是用@1x做设计稿的时候，那么你在适配 iPhone X的时候会方便很多很多，因为只需要增加高度就能得到 iPhone X的大小，你所有的 symbol基本都不要变，只是**几个苹果爸爸的 symbol到你 symbol里面即可。用来做 iPhone X的设计稿（一般也不单独做 iPhone X设计）但是如果你用@2x来做设计稿的只是稍微麻烦点，毕竟苹果爸爸Sketch UI Kit都是基于@1x来做设计稿的，所以你只能把 symbol重新解散然后做成@2x大小的尺寸，会比较麻烦。

虽然它们的逻辑像素宽度一致，但是他们的像素分辨率是不一样的，iPhone 6采用@2x切图，iPhone X采用@3x切图。有人会有用@2x做设计稿那怎么适配 iPhone X设计稿，难道要缩放？？ iPhone 6（750x1334px）尺寸到 iPhone X（1125x2436px），虽然两者的宽度关系是1.5倍，但是通过缩放做 iPhone X也是相当麻烦啊，因为你的 Sketch设计稿里面可能存在 symbol，所以这样的做法是行不通的，其实如果你的团队都是用@2x来做设计稿的话，也没啥问题，那接下来的就提供一个更简单的方法解决 iPhone X适配问题。

我列出了 iPhone X的三种分辨率的尺寸：375x812pt（@1x），750x1624px（@2x），1125×2436（@3x）

如果你使用的是750×1334（@2x）的设计稿，你在适配 iPhone X的时候可以采用 iPhone X_@2x的图来适配，这样就省去了缩放这一步骤，而且开发使用的是逻辑像素即375pt× 812pt来做 iPhone X的设计还原的，所以你这样设计 iPhone X是不会影响开发的，因为750x1624px（@2x）还原到@1x还是375x812pt，相信你已经明白了。

如果你用@1x来做设计稿：iPhone X安全区域是375x734pt

如果你用@2x来做设计稿：iPhone X安全区域是750x1468px

@1x的 iPhone X安全区域：其实安全区域=812pt—Status Bar(44pt) Home Indicator（34pt）

@2x的 iPhone X安全区域：其实安全区域=1624px—Status Bar(88px) Home Indicator（68px）

在开始之前，我们先看一下其他 app怎么适配之前的 iOS设备的，我们可以知道头部区域采用了等比例的方法来适配，因为只有这样才能保证640×1136上面能够放得下相应的内容。其他的只需要放置相应的切图即可。

一开始以为头部适配很简单就没有特别在意，我们一开始也采用了等比例适配，后来发现没有必要，因为 640×1136上基本可以显示完全。然后我们就开始适配 iPhone X了，后来开发通过 Xcode模拟出 iPhone X的适配结果，我发现问题好像出现了，所以我陷入了沉思。是不是我方法不对？后来跟我们的用*助手 iOS开发讨论了以后，发现原来导航栏的高度不是简单的200pt解决的，这里我们采用的是固定高度的做法而不是采用等比例的做法，一般这块区域可以有2种做法：等比例和固定高度，看你页面的构成，如果页面内容较少可以采用固定高度的做法。不然的话可能在小屏幕手机有些内容放不下。

在没有 iPhone X之前，固定高度做法：可以直接整体蓝**域高度给200pt解决问题，不用考虑导航栏问题~

但是 iPhone X出来了，这样的做法就会行不通，因为 iPhone X的导航栏高度是44pt 44pt=88pt，比 iPhone 6的导航栏（64pt）高了24pt，所以正确适配 iPhone X的做法应该是导航栏区域高度（88pt）（200pt-64pt）=224pt，相信大家也知道了其实说白了就是 Status Bar高度多了24pt，所以224pt比200pt大了24pt。

这里只是讲解了iPhone X一小部分和 iOS适配问题，还有其他适配的经验希望大家在工作中去积累总结，我这里就不一一讲解了。

由于 iPhone X的屏幕比例发生变化，对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响，需要对页面结构进行适当微调（注意缩放的时候不要把主体裁切了，然后注意页面的布局在 iPhone X上面的变化）

如果你的 app有全屏尺寸的活动图，没有导航栏，这个时候应该给开发@2x（750×1334）和@3x(1125×2001)图，然后 iPhone X上的图会使用@3x的图按照高度铺满然后裁切两边（注意两侧被裁切区域不要包含重要内容）

三、解读iPhone*********6Plus的设计尺寸为什么是1242***2208px

5.5英寸Retina HD高清显示屏，1920×1080像素分辨率，401 ppi

机身三围(长×宽×高)：158.1毫米(6.22英寸)× 77.8毫米(3.06英寸)× 7.1毫米(0.28英寸)

1920* 1080px是iPhone 6 Plus手机的物理尺寸，也就是物理分辨率。同时也是401ppi的屏幕。

此时，1080px对应的逻辑像素是 540 pt@2x。如上图右边的iPhone 6 Plus手机标注的一样。

当我们将上述的理论变成现实的时候，其调整回真机物理尺寸的时候，会发现 iPhone 6 Plus上的图反而变小了。非常的惊讶。如下图所示：

看完上面这个对比图，是不是iPhone 6 Plus的采用@2x倍的分辨率显示的图像比iphone6小。这样会导致一个非常尴尬的结果：用户拿着一个大屏手机，字却反而比小屏幕手机更小，更看不清楚。

因此，@2x不合适iPhone 6 Plus。

假设二：我们改用@3x倍率来显示图像如下：

得出的结论那就是照片肯定显示得要大多了，看的很清楚了。同时也带来了一个问题。

但逻辑像素则成了 360pt@3x，比 iPhone 6的 375pt@2x还要少。另一个尴尬的局面产生：用户拿着一个大屏的 iphone，看到的内容反而比iphone6和5少了。非常不好。

根据上述的结论，@2x和@3x在iPhone 6 Plus都不太行得通。苹果公司也是经过很长的心理纠结。终定下采用@3x。

iPhone 6+除外，其他所有iPhone的DPI是一致的，都是326，用@2x的素材。

但是6+的实际DPI是401，理论上苹果应该用401/326*@2x=@2.46x的素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上，实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。

这样算下来，物理分辨率和虚拟分比率的比例是87%，也就是1920/0.87=2208，1080/0.87=1242

好处就是开发者更方便，比如准备素材时，字号可以直接调成3x的。