开发微信小程序--适配 iPhone 等型号总结

一、展示效果

这是正常的样式效果：

这是不正常的效果：

二、原因分析：

在iPhone 6/7/8型号下是正常的，但在iPhone X等下是不正常的。

由于在 iPhone X 屏幕顶部状态栏区域有“齐刘海”，以及在屏幕底部增加了“操作条”，因此，我们在开发中需要注意 安全区域 的问题。

要在小程序中适配 iPhone X 屏幕，首先我们需要知道如何判断设备类型。

微信的小程序 API 中提供了一个 wx.getSystemInfo(OBJECT) 方法用于获取用户手机的系统信息和设备信息。

因此，我们可以根据该方法返回的手机型号字段 model 是否包含 iPhone X 字符串来判断设备是否为 iPhone X，也可以根据 screenHeight 的高度是否等于 812 来判断。

NOTE:这里有一个小坑需要注意&