本文主要介绍我们的知识小集小程序在适配 iPhone X 屏幕时遇到的一些问题以及总结,希望对你的小程序开发能有所帮助。
iPhone X 屏幕数据
在去年 9 月份 iPhone X 正式发布后,引发了一波 iOS App 适配 iPhone X 的热潮和技术文章,详情可以参考掘金技术社区的这个专题:《iPhone X 适配实践》
我们这里先简单总结一下 iPhone X 屏幕的基础数据,方便后续在小程序开发中进行适配。
-
屏幕尺寸:5.8 英寸(对角线)
-
屏幕物理分辨率:1125px × 2436px,458 ppi
-
实际开发适配尺寸:375pt × 812pt,@3x
此外,由于在 iPhone X 屏幕顶部状态栏区域有“齐刘海”,以及在屏幕底部增加了“操作条”,如下图所示,因此,我们在开发中需要注意安全区域的问题。
根据苹果官方的文档,iPhone X 顶部状态栏的适配安全区域的高度为 44pt,底部操作条区域的高度为 34pt。另外,在 iPhone X 中,一些系统 Bar 的默认高度相比于之前的设备也发生了变化,如下表所示。
所以在 iOS App 开发中,如果我们使用系统默认的 UINavigationController
和 UITabBarController
时,则无需额外的适配工作,iOS 系统会自动适配好相关 Bar 的安全区域问题。如果我们使用了自定义的导航栏和标签栏,则需要注意根据设备类型区分设置这些 Bar 的不同高度。
小程序的尺寸单位
为了解决不同屏幕尺寸的适配问题,小程序自己定了一个尺寸单位:rpx(responsive pixel),它可以根据屏幕宽度进行自适应。小程序中规定,所有设备的屏幕宽度都为 750rpx,根据设备屏幕实际宽度的不同,1rpx 所代表的实际像素值也不一样。
根据微信开发文档,在 4.7 英寸的 iPhone 设备上(iPhone 6/7/8),屏幕宽度为 375px(此处应该理解为 375 point),共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1物理像素。
小程序中如何判断设备为 iPhone X
上面我们简要介绍了 iPhone X 的屏幕数据和小程序中的尺寸单位作为铺垫,现在终于要切入正题了,要在小程序中适配 iPhone X 屏幕,首先我们需要知道如何判断设备类型。
微信的小程序 API 中提供了一个 wx.getSystemInfo(OBJECT)
方法用于获取用户手机的系统信息和设备信息,