移动端适配 - 原理篇

移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题:

  • 1px问题
  • UI图完美适配方案
  • iPhoneX适配方案
  • 横屏适配
  • 高清屏图片模糊问题
  • ...

上面这些问题可能我们在开发中已经知道如何解决,但是问题产生的原理,以及解决方案的原理可能会模糊不清。在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。

本文将从移动端适配的基础概念出发,探究移动端适配各种问题的解决方案和实现原理。

一、英寸

一般用英寸描述屏幕的物理大小,如电脑显示器的17、22,手机显示器的4.8、5.7等使用的单位都是英寸。
移动端适配 - 原理篇

英寸和厘米的换算:1英寸 = 2.54 厘米

二、物理像素

2.1 像素

像素即一个小方块,它具有特定的位置和颜色。

图片、电子屏幕(手机、电脑)就是由无数个具有特定颜色和特定位置的小方块拼接而成。

像素可以作为图片或电子屏幕的最小组成单位。

2.2 物理像素

到电商网站购买手机,都会看一看手机的参数,以apple的官网上对手机分辨率的描述为例:

移动端适配 - 原理篇

iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。表示手机分别在垂直和水平上所具有的像素点数。这里描述的就是屏幕实际的物理像素,即一个屏幕具体由多少个像素点组成。

屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位为pt。当然分辨率高不代表屏幕就清晰,屏幕的清晰程度还与尺寸有关。

设备像素 = 物理像素

2.3 PPI(Pixel Per Inch) - 每英寸包括的像素数

PPI可以用于描述屏幕的清晰度以及一张图片的质量。

使用PPI描述图片时,PPI越高,图片质量越高,使用PPI描述屏幕时,PPI越高,屏幕越清晰。

由于手机尺寸为手机对角线的长度,通常使用如下的方法计算PPI:

移动端适配 - 原理篇

iPhone 6的PPI为 移动端适配 - 原理篇
,那它每英寸约含有326个物理像素点。

移动端适配 - 原理篇

上一篇:配置uni-app导航栏上的搜索框


下一篇:R-apply()函数