ios开发中的屏幕适配,主流ios的屏幕设计多大尺寸去适配

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

iPhone屏幕尺寸、分辨率及适配

根据勾股定理，可以得知iPhone4(s)的PPI计算公式为:

早期的iPhone3GS的屏幕分辨率是320 480（PPI=163），iOS绘制图形（CGPoint/CGSize/CGRect）均以point为单位（measured in points）： 1 point = 1 pixel（Point Per Inch=Pixel Per Inch=PPI）

后来在iPhone4中，同样大小（3.5 inch）的屏幕采用了Retina显示技术，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到(320x2)x(480x2)= 960x640（PPI=326），显像分辨率提升至iPhone3GS的4倍（1个Point被渲染成1个2x2的像素矩阵）

但是对于开发者来说，iOS绘制图形的API依然沿袭point(pt，注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下（320x480）：

1 point = scale pixel（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。

可以理解为：scale=绝对长度比（point/pixel）= 单位长度内的数量比（pixel/point）

UIScreen.h中定义了该属性：

//This value reflects the scale factor needed to convert from the default logical coordinate space into the device coordinate space of this screen. //The default logical coordinate space is measured using points. For standard-resolution displays, the scale factor is 1.0 and one point equals one pixel. For Retina displays, the scale factor is 2.0 and one point is represented by four pixels.

为了自动适应分辨率，系统会根据设备实际分辨率，自动给UIScreen.scale赋值，该属性对开发者只读。

iOS8新增了nativeScale属性,初步看来nativeScale与scale没有太大区别：

@2x means the same “double”retina resolution that we’veseen on all iOS devices with retina displays to date, where each virtual pointin the user interface is represented by two physical pixels on thedisplay in each dimension, horizontal and vertical.

iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。

例如在iPhone3GS中，scale=1，用的图标是50x50pixel（logicalimage.size=50x50point）；在iPhone4~6中，scale=2，则需要100×100pixel（logical image.size=50x50point，乘以image.scale=dimensions in pixels），并且命名为icon@2x.png。

如果APP要同时兼容iPhone3GS~iPhone6，则需要提供icon.png/icon@2x.png两种分辨率的图片。

@3x means a new “triple” retina resolution, where eachuser interface point is represented by three display pixels. A single @2x pointis a 2 × 2 square of 4 pixels; an @3x point is a 3 × 3 square of 9 pixels.”

iPhone6+在实际渲染时，downsampling/1.15（1242x2208-1080x1920），准确的讲，应该是@2.46x。苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上。

参考：[《为什么iPhone 6 Plus要将3x渲染的2208x1242分辨率缩小到1080p屏幕上？》]( “为什么iPhone 6 Plus要将3x渲染的2208x1242分辨率缩小到1080p屏幕上？”) 《iPhone 6 Plus屏幕分辨率》

需要注意的是，iOS APP图标的尺寸和命名都需要遵守相关规范。

对于iPhone3、4/5/6、6+三类机型，需要按分辨率提供相应的高倍图并且文件名添加相应后缀，否则会拉伸（stretchable/resizable）失真（模糊或边角出现锯齿）。

bounds的原点是(0,0)点（就是view本身的坐标系统，默认永远都是0，0点，除非认为setbounds），而frame的原点却是任意的（相对于父视图中的坐标位置）。

iOS屏幕适配的两种方法

第一种

添加两个文件 UIViewExt.h与UIViewExt.m文件

在ViewController.h文件中导入头文件

#import"UIViewExt.h"

然后宏定义获取设备的高与宽

#define HEIGHT self.view.height

#define WIDTH self.view.width

然后在ViewController.m文件中初始化各种控件时就可以使用视图的相对位置

如

self.lblName=[[UILabelalloc]initWithFrame:CGRectMake(self.view.left+50,self.view.top+100,WIDTH/8,HEIGHT/16)];

self.lblPassworw=[[UILabelalloc]initWithFrame:CGRectMake(self.view.left+50,self.lblName.bottom+10,WIDTH/8,HEIGHT/16)];

第二种

这种方法是等比缩放

首先在AppDelegate.h文件里面

宏定义获取设备的高与宽

#define SCREENHEIGHT [[UIScreen mainScreen] bounds].size.height

#define SCREENWIDTH [[UIScreen mainScreen] bounds].size.width

接着声明两个属性变量

@property(assign,nonatomic)floatautoSizeScaleX;

@property(assign,nonatomic)floatautoSizeScaleY;

在AppDelegate.m文件里面

//初始化AppDelegate单例的方法

AppDelegate*myDelegate=[[UIApplicationsharedApplication]delegate];

//判断屏幕的高大于480即为iPhone5或以上设备因为它们屏幕都是等比增长的

if(SCREENHEIGHT480)

{

/**

*以iPhone5为基准若是iPhone5

则myDelegate.autoSizeScaleX=SCREENWIDTH/320;

即为myDelegate.autoSizeScaleX=320/320;

若是iPhone6

则myDelegate.autoSizeScaleX=SCREENWIDTH/320;

即为myDelegate.autoSizeScaleX=375/320;

myDelegate.autoSizeScaleX=SCREENWIDTH/320;

myDelegate.autoSizeScaleY=SCREENHEIGHT/568;

}

else{

/**

*否则即为iPhone4

myDelegate.autoSizeScaleX=1.0;

myDelegate.autoSizeScaleY=1.0;

}

在ViewController.h文件中使用时导入头文件

#import"AppDelegate.h"

模仿系统的CGRectMake方法重写一个CGRectMake1方法在初始化控件时用这个方法就可以实现等比缩放来失陪不同屏幕尺寸的iPhone

/**

* CG_INLINE为内联函数

将CGRectMake重新定义为CGRectMake1

* @param x #x description#

* @param y #y description#

* @param width #width description#

* @param height #height description#

* @return rect的大小

CG_INLINECGRect

CGRectMake1(CGFloatx,CGFloaty,CGFloatwidth,CGFloatheight)

{

CGRectrect;

AppDelegate*myDelegate=[[UIApplicationsharedApplication]delegate];

rect.origin.x= x * myDelegate.autoSizeScaleX;

rect.origin.y= y * myDelegate.autoSizeScaleY;

rect.size.width= width * myDelegate.autoSizeScaleX;

rect.size.height= height * myDelegate.autoSizeScaleY;

returnrect;

}

iOS 字体规范和多屏适配

分辨率与像素（分辨率单位是程序所说的单位——点即pt，像素为真实Pixel）

1.iphone4分辨率320*480pt，像素640*960px

2.iphone5分辨率320*568pt，像素640*1136px

3.iphone6分辨率375*667pt，像素750*1334px

4.iphone6 Plus分辨率414*736pt，像素1242*2208（注：Plus屏幕的实际分辨率只有1920*1080，实际情况是在此分辨率下渲染的图像等比降低到1080P）

另外，iPhone6和iPhone 6Plus都有标准模式和放大模式2种分辨率：

1.iPhone4和iPhone5宽度一样，5只是比4高176像素，所以5和4一套规范即可；

2.iPhone6的放大模式分辨率是640＊1136，和iPhone5正好相同；

3.iPhone6的标准模式分辨率为750*1334，整体放大1.5倍正好是iPhone6 Plus的放大模式1125*2001。

我们来看淘宝购物车的截图（从左到右依次为iPhone4、5、6）：

我们可以看出iPhone 4、5、6共用一套字体大小规范。

而iPhone6 plus在放大模式下的字体正好是在此基础上放大了1.5倍：

下面我们来看IOS上具体字体常用字号规律；

首先，一个视觉舒适的APP界面，字号大小对比要合适，并且各个不同界面大小对比要统一。

先说一般规律（72像素/英寸下的字号大小规律）：

导航栏标题：大概34px-42px；现在标题越来越小，一般34或36比较合适。

标签栏文字：20－24px。ios自带应用都是20px。个人认为标签栏时（图标＋文字）形式的的话不要大于22比较合适。

正文：28px－36px，新闻类基本都在用36，比如网易新闻正文部分。

下面是IOS人际界面指南上的具体要求：

1）正文样式在大字号下使用 34 px字体大小，最小也不应小于 22 。

2）通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 px。一般为了区别开标题和正文字体大小差异要至少为4px。

3）标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用中等效果。（注意：mac电脑上默认使用黑体就有中等和细体2个选项）。

最后，最后关于字号大小规律，最好找比较好的应用截图，然后量出现有规律直接套用即可：

iOS 四种iPhone屏幕适配方案(借鉴)

Come on! 来看看主流的适配方案吧

随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。

当然除了这三种还有iPhone4 屏幕是 640*960,加起来就有四种屏幕了，你有没有感觉很复杂，发过愁吗，我们来慢慢分析下

加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：

1、选择一种尺寸作为设计和开发基准；

2、定义一套适配规则，自动适配剩下两种尺寸；

3、特殊适配效果给出设计效果。

来看一下手机淘宝的iPhone 6/iPhone 6 Plus采用的协作模式，再慢慢说明原委。

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

为什么选择iPhone 6作为基准尺寸？

当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因：

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。

2、iPhone 6 plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。

所以，iPhone6的750x1334是最适合基准尺寸。

只交付一套设计稿，默认用什么规则来适配？

前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放

控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。

按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。

读完你懂了吗，如果有疑问，欢饮留言跟我讨论╰(￣▽￣)╮

原文地址