APP开发屏幕适配原理及实现方法(Android、iOS)

APP开发屏幕适配原理及实现方法(Android、iOS)

屏幕尺寸

严格来说，屏幕尺寸实际被物理尺寸和显示分辨率两个部分定义。而我们今天对各类手机、Pad 设备所说的屏幕尺寸，只指物理尺寸。如果一块手机屏幕的物理尺寸是5.5 英寸，即是指该手机屏幕对角线的长度。

屏幕分辨率

屏幕分辨率是指屏幕图像的精密度，是显示器所能显示的像素的具体数值。

如一个手机标称分辨率是720 x 1280，即表示屏幕横向由720 个像素点组成，纵向由1280 个像素点组成。由于屏幕上的点、线和面都是由像素组成的，屏幕具备的像素点越多，画面就越精细。分辨率越高，单位面积内显示的信息就越多，我们能看到的内容就越多。

屏幕比例

屏幕比例是指屏幕的宽度与高度的比例，今天更多指分辨率的比例，即

屏幕比例 = 屏幕横向分辨率 / 屏幕纵向分辨率

此外，在各类设备、平台之间也有一些比较常用的比例，同时也推荐大家在开发对应设置或平台的应用时使用推荐比例。

使用推荐比例可以让用户在使用我们的App 时更舒适，带来更好的使用体验。

在这里为开发者提供一张简单的表格，记录了使用APICloud 技术开发应用时四大平台产品的主流显示比例。

可以看出主流应用更推荐使用16 : 9 的屏幕比例

DPI

DPI（Dots Per Inch），每英寸所拥有的点数，原用于打印机、鼠标的精确度指标。在屏幕方面一般使用PPI 来表示精度。

PPI

PPI（Pixels Per Inch），每英寸所拥有的像素数，屏幕的PPI 越高，表示屏幕中的每个像素点之间的距离越接近，像素的密度越高，这样屏幕内容看起来就更加细腻、真实。

而当PPI 超过300 时，屏幕被认为达到了视网膜级别，一般情况下人眼已经较难察觉300 以上PPI 之间的差别。

计算公式：

以iphone 6 plus 为例，屏幕分辨率1080 x 1920，屏幕尺寸5.5 英寸

PPI = √(1920 ^ 2 + 1080 ^ 2) / 5.5 = 400.5285…… ≈ 400

屏幕密度（Density）

Density 由Android 1.6 版本（Android API Level 4）为了适配不同大小的屏幕而提出，表示每英寸有多少个显示点(逻辑值)，它的单位是DPI。

在Android 原生开发中，常常使用dp/dip/sp 等单位来定义视图、文字的宽高

理论上当Density 的值为160 DPI 时，1px = 1dp，当前屏幕的Density 为320 DPI 时，2px = 1dp

在这里为开发者提供一张简单的表格，记录了几种主流Android 手机的Density 值。

缩放倍率（scaleFactor）

scaleFactor 由Apple 公司为iPhone 屏幕适配定义的标准。

早期的iPhone 3GS 的屏幕分辨率是320 x 480（PPI = 163），iOS 绘制图形（CGPoint/CGSize/CGRect）均以点（point）为单位（measured in points）：

1 point = 1 pixel

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

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

1 point = scale x pixel

在iPhone 4 ~ 6 中，缩放因子scale = 2；在iPhone 6 plus 中，缩放因子scale = 3，可以理解为：

scale = 绝对长度比（point / pixel）= 单位长度内的数量比（pixel / point）

其中iPhone 6 Plus 的scale = 3 只是为了书写方便，实际会在渲染时被iOS 系统转换，除以

1.15，变为

2.608 倍左右

在这里为开发者提供一张简单的表格，记录了几种主流iPhone 手机的scaleFactor 值。

逻辑分辨率

逻辑分辨率在APICloud 应用中也可以被当做显示分辨率使用。逻辑分辨率与屏幕分辨率在当今的主流设备中是不相同的，公式为：

逻辑分辨率 = 屏幕分辨率 / 屏幕倍率

在Android 系统中，根据DP 的定义1dp = 1px 时，Density 为160，可知公式为：

Android 屏幕倍率 = Density / 160

如iPhone 4 的屏幕分辨率为640 x 960，逻辑分辨率为：

640 / 2 x 960 / 2 = 320 x 480

而小米2 的屏幕分辨率为720 x 1280，Density 为320，逻辑分辨率为：

720 / (320 / 160) x 1280 / (320 / 160) = 360 x 640

推荐UI 尺寸

APICloud 应用中的页面均使用逻辑分辨率来显示元素，考虑到屏幕比例、实际换算难度等因素，我们推荐您选择720 x 1280分辨率为标准制作UI 设计图。

量图标准

∙绝对计量：优先考虑绝对计量类的单位，如px 单位

∙相对计量

o如果使用px 等绝对计量值无法实现所需布局时，可以考虑使用rem，百分比等单位

o选择百分比做为元素宽度、高度单位时，推荐只使用100%，而不使用非100% 的值，此类数值较容易出现页面变形

∙使用640 x 960 或720 x 1280 的UI 设计图，应先量出元素的宽或高对应的px 值，再除以2 得到书写样式时的确切数值

o如：一个按钮在720 x 1280 的设计图中占具了160 px 宽，88 px 高，我们的样式应该指定该按钮width:80px;height:44px

∙弹性盒子

o当绝对计量和相对计量均无法轻易实现所需布局时，可以考虑使用弹性盒子（flex、box）

o由于iOS 和Android 系统浏览器都使用-webkit-标准，弹性盒子样式只需要适配-webkit-即可

∙box-sizing