####UI适配学习
基础概念 #####屏幕尺寸 这个很好理解,就是人们常说的屏幕几英寸, 例如:iPhone 4的屏幕大小3.5英寸,iPhone 5的屏幕大小4.0英寸.
#####分辨率 #####显示器分辨率 显示器的分辨率是通过像素大小来描述的. 例如,如果显示器的分辨率与照片的像素大小相同,则按照100%的比例查看照片时,照片将填满整个屏幕.
#####打印机分辨率 打印机分辨率的测量单位是油墨点/英寸(也称作 dpi). 一般来说,每英寸的油墨点越多,得到的打印输出效果就越好.
#####图像像素尺寸,分辨率 像素尺寸测量了沿图像的宽度和高度的总像素数. 分辨率是指位图图像中的细节精细度,测量单位是像素/英寸(ppi).每英寸的像素越多,分辨率越高.
手机的屏幕当然是显示器了,所以它的分辨率是指屏幕上有多少个像素, 例如:iPhone 4的分辨率 640 × 960 px, iPhone 5的分辨率640 × 1136 px
#####屏幕密度 厂商的说明书上一般都会以 ppi (pixel per inch) 为单位; Android 系统,用dpi(dots per inch)来表示.
#####与密度无关的单位 暂且称为逻辑像素,各家有各家的叫法.iOS 用 points 表示, Android用dp表示,Web用CSS pixel 表示. 所以再听到这些名词时,莫慌说的都是一个东西.
#####倍率 iOS:常听到的 1X, 2X,3X.
Android:常听到的MDPI,HDPI,XHDPI,XXHDPI,XXXHDPI这里边实际上是倍率的关系, MDPI : HDPI : XHDPI : XXHDPI : XXXHDPI = 2 : 3 : 4 : 6 : 8
Web:通过 JavaScript 调用 window.devicePixelRatio即可获得
为啥谈倍率呢?这与上边的密度无关的单位结合起来可是很好的东东.且看下表
表头 横轴:倍率,纵轴:逻辑像素,无颜色的单元格内的数字的单位为pixel.
||1|1.5|2|3|4| -|-|-|-|-|-| |1 points|1|无|2|3|无 |1 dp|1|1.5|2|3|4 |1 css pixel|1|1.5|2|3|4
上表展示了,逻辑像素与屏幕像素的转换关系,同时,当逻辑像素大小为奇数时, 在 Android,Web平台会有次像素的问题.所以,尽量用偶数咯.
从逻辑像素转换到屏幕像素,当然是由系统完成. 分辨率这个概念, 请参看 photoshop文档
常见设备尺寸 设备|平台|屏幕尺寸(in)|长宽比|逻辑像素(dp)|物理像素(px)|倍率| -|-|-|-|-|-|-| Android One|Android|4.5 2.2 * 3.9|16:9|320 * 569|480 * 854|1.5| Nexus 5|Android|5.0 2.4 * 4.3|16:9|360 * 640|1080 * 1920|3| Samsung Galaxy S6|Android|5.1 2.5 * 4.4|16:9|360 * 640|1440 * 2560|4| iPhone 4|IOS|3.5 2.0 * 2.9|3:2|320 * 480|640 * 960|2| iPhone 5|IOS|4.0 2.0 * 3.5|16:9|320 * 568|640 * 1136|2| iPhone 6|IOS|4.7 2.3 * 4.1|16:9|375 * 667|750 * 1334|2| iPhone 6 Plus|IOS|5.5 2.7 * 4.8|16:9|414 * 736|1080 * 1920|3|
注意图中的iPhone6 Plus的数据看起来很奇怪,414 * 736 * 3 = 1242 * 2208. 而物理像素却是10801920,这是为什么呢? 实际上iPhone 6 Plus渲染出的图片尺寸为1242 * 2208 px,但是屏幕只有10801920px. 所以系统会对渲染出的图进行压缩.
从表中数据可以看出:
- 虽然物理像素各种各样,但是逻辑像素还是相对统一的.
- 逻辑像素相接近的,屏幕尺寸也比较接近.
actually,逻辑像素就是为了使UI在不同的屏幕上表现的一致. 即:相同单位的逻辑像素,在不同屏幕上的物理尺寸相同.
如何适配
- 为不同倍率的屏幕提供对应的图片资源 IOS平台的2倍3倍图 Android平台的drawable-mdpi,drawable-hdpi,drawable-xhdpi等等 Web平台,JavaScript根据倍率请求不同的图片
- 使用逻辑像素作为UI元素的长度单位 IOS:pt,Android:dp,Web:css pixel
- 为不同尺寸的屏幕提供不同的布局