iOS屏幕适配

适配的关键

对于大多数开发者而言,UI的开发流程是:设计师出图 ->还原设计师效果图。问题是:设计师一般只会给一套设计图,基于6或者6p,其他设备上的显示信息需要开发者自己去做调整。所以个人觉得还原设计图之前要与设计师进行充分的沟通,在不同屏幕上,字体、元素宽高,元素间距等信息如何处理。只有你们定好了规范,你才能在不同的屏幕上做到还原设计师的设计意图,而不会重复返工修改UI。

屏幕适配包含哪些内容

  • 字体适配
  • 距离适配
  • 图片适配

iPhone 设备屏幕信息

下图展示了从初代iPhone到iPhoneX的屏幕信息。

iPhone屏幕信息

你可以在这个下载到PDF格式。

接下来介绍关于适配的几个概念。

point 点

我们开发过程中常用的单位就是点。在早期iOS系统中一个点就是一个像素。

Pixel 像素

随着屏幕技术的提升,1个点所表示的像素数也越来越多,清晰度也越来越高。iOS中通过UIScreen.mainScreen.scale 可以获取当前设备的缩放因子,如果该值为2,则一个点表示4个像素,该值为3,则一个点表示9个像素。

PPI

每英寸所拥有的像素数目。

适配原理

PPI放大过程

我们来假设:设计师给的设计图是基于4.7英寸的设备。所以,相对5.5英寸是扩大了1.17倍,对于4英寸的设备缩小到0.875倍。由于目前市面上基本上已经没有了3.5英寸的设备了,并且4英寸和3.5英寸的屏幕宽度都是320,所以我们就在3.5英寸的设备上直接显示4英寸上的内容,不做缩放。这样一来,只剩下了iPhone X。对于iPhone X而言,由于其相对于4.7英寸的设备而言只是高度增加了,这是暂时让其与4.7英寸的屏幕保持一致,只需根据具体的页面信息来调整其高度信息。