【移动端】手机界面的设计尺寸

smart_dream

已于 2024-04-03 11:55:22 修改

阅读量6.9k

点赞数 1

分类专栏：其他文章标签： iphone ios 分辨率

于 2021-03-05 13:34:10 首次发布

本文链接：https://blog.csdn.net/xiaoxiong_jiaxin/article/details/114388097

版权

其他专栏收录该内容

9 篇文章 0 订阅

订阅专栏

从设计方面来看，做手机界面设计的尺寸一般分为iPhone和Android两种设备。

Android的常用逻辑分辨率：

Android的常用逻辑分辨率：参考屏幕尺寸大全
*360 640 、 360 * 720、 360 * 740、 360 * 760、 360 * 780、 360 * 800**
*411 731**
*480 853**

iPhone的分辨率

设备	屏幕尺寸	像素密度 PPI	纵横比	逻辑分辨率 (point)(pt)	物理分辨率 (pixel)(px)	缩放因子 (scale)
iPhone 13 Pro Max	6.7	458	19 : 9	428 x 926	1284 x 2778	3.0 xxhdpi
iPhone 13 Pro	6.1	460	19 : 9	390 x 844	1170 x 2532	3.0 xxhdpi
iPhone 13	6.1	460	19 : 9	390 x 844	1170 x 2532	3.0 xxhdpi
iPhone 13 mini	5.4	476	19 : 9	360 x 780	1080 x 2340	3.0 xxhdpi
iPhone 12 Pro Max	6.7	458	19 : 9	428 x 926	1284 x 2778	3.0 xxhdpi
iPhone 12 Pro	6.1	460	19 : 9	390 x 844	1170 x 2532	3.0 xxhdpi
iPhone 12 Mini	5.4	476	19 : 9	360 x 780	1080 x 2340	3.0 xxhdpi
iPhone 11 Pro	5.8	458	19 : 9	375 x 812	1125 x 2436	3.0 xxhdpi
iPhone 11 Pro Max	6.5	458	19 : 9	414 x 896	1242 x 2688	3.0 xxhdpi
iPhone 11 （11，XR）	6.1	326	19 : 9	414 x 896	828 x 1792	2.0 xhdpi
iPhone XS Max	6.5	458	19 : 9	414 x 896	1242 x 2688	3.0 xxhdpi
iPhone X (X,XS)	5.8	458	19 : 9	375 x 812	1125 x 2436	3.0 xxhdpi
iPhone 8+ (8+, 7+, 6S+, 6+)	5.5	401	16 : 9	414 x 736	1242 x 2208	3.0 xxhdpi
iPhone 8 (8, 7, 6S, 6)	4.7	326	16 : 9	375 x 667	750 x 1334	2.0 xhdpi
iPhone 5 / 5S / 5C / SE	4.0	326	9:16	320 x 568	640 x 1136	2.0 xhdpi
iPhone 4 / 4S	3.5	326	2:3	320 x 480	640 x 960	2.0 xhdpi
iPhone 2G / 3 / 3GS	3.5	163	2:3	320 x 480	320 x 480	1.0 xhdpi

全新 iPhone 12 发布，再谈 iPhone 屏幕尺寸

平板分辨率	笔记本分辨率	电脑分辨率
2560 x 1600 (2k+超清屏) 2560 x 1440 (2k) 2048 x 1536 (2k超清屏) 1920 x 1200 (1080p+全高清) 1920 x 1080 (1080p 全高清) 1366 x 768 (720p+高清屏) 1280 x 800 (720p 宽屏) 1024 x 768 (720p 屏) 1136 x 640 1024 x 600 800 x 480 (可以看到明显的像素点，清晰度低)	3840×2160（4K） 2560×1440（2K） 1920 x 1080 (1080p 全高清)(HD) 1366×768	1920 x 1080(推荐) 1680 x 1050 1600 x 1200 1600 x 900 1440 x 900 1280 x 1024 1280 x 960 1280 x 768 1280 x 720 1152 x 864 1024 x 768 800 x 600

平板分辨率

笔记本分辨率

电脑分辨率

2560 x 1600 (2k+超清屏)

2560 x 1440 (2k)

2048 x 1536 (2k超清屏)

1920 x 1200 (1080p+全高清)

1920 x 1080 (1080p 全高清)

1366 x 768 (720p+高清屏)

1280 x 800 (720p 宽屏)

1024 x 768 (720p 屏)

1136 x 640

1024 x 600

800 x 480 (可以看到明显的像素点，清晰度低)

3840×2160（4K）

2560×1440（2K）

1920 x 1080 (1080p 全高清)(HD)

1366×768

1920 x 1080(推荐)
1680 x 1050
1600 x 1200
1600 x 900
1440 x 900
1280 x 1024
1280 x 960
1280 x 768
1280 x 720
1152 x 864
1024 x 768
800 x 600

屏幕尺寸

屏幕尺寸是指屏幕的对角线长度。

单位

屏幕的单位是以英寸为单位。换算关系如下：1 inch = 2.54cm = 25.4mm

逻辑分辨率和物理分辨率

逻辑分辨率以point（pt）为单位，物理分辨率以pixel（px）为单位。

缩放因子（scale）

因为逻辑分辨率和物理分辨率存在着一定的比例关系，这种比例的关系称为缩放因子。其对应关系为：1pt = scale * px

像素密度PPI

像素密度PPI(Pixel Per Inch)是指每英寸上容纳的像素数量。

计算PPI，可以简单用勾股定理计算出对线上出现的像素，再除以对角线上长度：

我们知道，手机的屏幕是以像素的方式一个一个呈现出来的。PPI值越高，意味着有更细腻的画面。较低PPI的屏幕看起来有颗粒感。但是当PPI值到达一定程度后，再继续提升肉眼就分别不出来了。这就是苹果提出的Retina显示屏的概念。在一定的距离内，手机显示屏在200PPI以上时，肉眼就分辨不出单个像素点了。