标签归档：屏幕像素

APP屏幕尺寸有那些大小，主流的设备尺寸一览表

发表于由

APP屏幕尺寸有那些大小，主流的设备尺寸一览表
屏幕尺寸

严格来看，屏幕尺寸实际被物理尺寸和显示分辨率两个部分定义。

而我们今日对各类手机、Pad 设备所说的屏幕尺寸，只指物理尺寸。

假设一块手机屏幕的物理尺寸是 五.五 英寸，即是指该手机屏幕对角线的长度。

屏幕分辨率

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

如一种手机标称分辨率是 七二0 x 1二八0，即表示屏幕横向由 七二0 个像素点组成，纵向由 1二八0 个像素点组成。

由于屏幕上的点、线和面都是由像素组成的，屏幕具备的像素点越多，画面就越精细。

分辨率越高，单位面积内显示的信息就越多，我们能看到的内容就越多。

屏幕比例

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

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

此外，在各类设备、官方之间也有一些比较通用的比例，同时也推荐大家在制作对应设置或官方的应用时使用推荐比例。

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

在这里为制作者提供一张轻松的表格，记录了使用 一门APP 技术制作应用时4大官方产品的主流显示比例。

能够看出主流应用更推荐使用 1六 : 九 的屏幕比例

DPI

DPI（Dots Per Inch），每英寸所拥有的点数，原用于打印机、鼠标的精确度指标。

在屏幕方面通常使用 PPI 来表示精度。

PPI

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

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

计算公式：

以 iphone 六 plus 为例，屏幕分辨率 十八0 x 1九二0，屏幕尺寸 五.五 英寸

PPI = √(1九二0 ^ 二 + 十八0 ^ 二) / 五.五 = 四00.五二八五…… ≈ 四00

屏幕密度（Density）

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

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

理论上当 Density 的值为 1六0 DPI 时，1px = 1dp，当前屏幕的 Density 为 三二0 DPI 时，二px = 1dp

在这里为制作者提供一张轻松的表格，记录了几种主流 Android 手机的 Density 值。

屏幕分辨率

屏幕密度（Density）

二四0 x 四00

1二0

三二0 x 五三三

1六0

四八0 x 八00

二四0

六四0 x 九六0

三二0

七二0 x 1二八0

三二0

十八0 x 1九二0

四八0

1四四0 x 二五六0

五六0

缩放倍率（scaleFactor）

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

早期的 iPhone 三GS 的屏幕分辨率是 三二0 x 四八0（PPI = 1六三），iOS 绘制图形（CGPoint/CGSize/CGRect）均以点（point）为单位（measured in points）：

1 point = 1 pixel

后来在 iPhone 四 中，一样大小（三.五 inch）的屏幕采用了 Retina 显示技术，横、纵向方向像素密度都被放大到二倍，像素分辨率提升到 (三二0 x 二) x (四八0 x 二) = 六四0 x vue移动端开发九六0（PPI = 三二六）， 显像分辨率提高至 iPhone 三GS 的 四 倍（1 个 Point 被渲染成 1 个 二 x 二 的像素矩阵）。

不过对于制作者来看，iOS 绘制图形的 API 依然沿袭 point（pt，注意区分印刷行业的“磅”）为单位。

在一样的逻辑坐标系下（三二0 x 四八0）：

1 point = scale x pixel

在 iPhone 四 ~ 六 中，缩放因子 scale = 二；在 iPhone 六 plus 中，缩放因子 scale = 三，能够理解为：

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

其中 iPhone 六 Plus 的 scale = 三 只是为了书写方便，实际会在渲染时被 iOS 系统转换，除以 一.1五，变为 二.六0八 倍上下

在这里为制作者提供一张轻松的表格，记录了几种主流 iPhone 手机的 scaleFactor 值。

机型

屏幕分辨率

缩放倍率

iPhone 三GS

三二0 x 四八0

1

iPhone 四/四S

六四0 x 九六0

二

iPhone 五/五S

六四0 x 11三六

二

iPhone 六/六S

七五0 x 1三三四

二

iPhone 六 Plus/六S   Plus

十八0 x 1九二0

三

逻辑分辨率

逻辑分辨率在 一门APP 应用中也能够被当做显示分辨率使用。

逻辑分辨率与屏幕分辨率在当今的主流设备中是不相同的，公式为：

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

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

Android 屏幕倍率 = Density / 1六0

如 iPhone 四 的屏幕分辨率为 六四0 x 九六0，逻辑分辨率为：

六四0 / 二 x 九六0 / 二 = 三二0 x 四八0

而小米 二 的屏幕分辨率为 七二0 x 1二八0，Density 为 三二0，逻辑分辨率为：

七二0 / (三二0 / 1六0) x 1二八0 / (三二0 / 1六0) = 三六0 x 六四0

推荐 UIUX 尺寸

一门APP 应用中的页面均使用逻辑分辨率来显示元素，研究到屏幕比例、实际换算难度等因素，我们推荐你选用 七二0 x 1二八0 分辨率为标准开发 UIUX 设计图。

量图标准

·         绝对计量：优先研究绝对计量类的单位，如 px 单位

·         相对计量

o    假设使用 px 等绝对计量值无法实现所需布局时，能够研究使用 rem，百分比等单位

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

·         使用 六四0 x 九六0 或 七二0 x 1二八0 的 UIUX 设计图，应先量出元素的宽或高对应的 px 值，再除以 二 得到书写样式时的确切数值

如：一种按钮在 七二0 x 1二八0 的设计图中占具了 1六0 px 宽，八八 px 高，我们的样式应该指定该按钮       width:八0px;height:四四px

·         弹性盒子

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

o    由于 iOSVUE打包成app 和 Android 系统浏览器都使用 -webkit- 标准，弹性盒子样式只想要适配 -webkit- 即可

·         box-sizing

我们还能

够利用样式属性 position 来实现特殊布局，将元素指定为 position:relation 或 position:absolute，同时结合样式属性 box-sizing 改变盒子计算方案并html打包为apk指定具体的padding 值完成布局

viewport

viewport 是由 Apple 公司为了让更多桌面网站能够在 safari 浏览器内正常显示而推出的解决方式，后被各大浏览器支持。

使用 viewport 能够自定义当前页面在浏览器中以何种分辨率显示。

而 一门APP 应用由于在引擎层做了多屏幕适配工作，如手动指定 viewport 为某个具体的数值时，可能会造成我们的应用页面显示变形。

在 一门APP 应用中，我们推荐你使用下述代码设置 viewport 以确保你的应用显示正常：

示例下载地址：

点击链接下载：

GitHub：https://github.com/yimenappcom/demo-screen-adapt/tree/master/screenAdapt/sources