小程序适配iphonex介绍 -凯发app官方网站

支付宝小程序

案例分析

小程序开发前准备

小程序api&组件示例

关注&跳转生活号组件使用说明

小程序page页面中父组件&子组件相互传值调用方法

sjs中getregexp正则表达式函数介绍

小程序地区单选&多项选择场景能力

小程序缓存介绍

服务器端各语言实现手机号&运动步数-aes密文解密

小程序前端实现图片转换base64图片数据

小程序前端中如何实现领取优惠券（消费红包）

小程序打开扫一扫&红包&爱攒油&小程序快报生活号&蚂蚁森林&蚂蚁庄园&股票详情页&付款码等官方业务

小程序模板订购链路介绍

模板小程序发布服务市场发布信息介绍

商家订购小程序获取&推进订单状态和终止订单服务说明

ide开发工具常用快捷键

字符串转换hex string（十六进制字符串）

template_not_have_host

msg_send_error

sdk & demo下载

常见问题

常用工具

iot小程序

运维保障

小程序 > 支付宝小程序 > 案例分析 > 小程序适配iphonex介绍

更新时间：2022-11-21 11:16:42

贡献者

我的文档

设置

小程序适配 iphonex 步骤

涉及适配的主要有自定义导航栏（navigationbar）、自定义标签栏（tabbar）以及页面底部的吸底按钮（使用官方组件进行开发，不需要自行适配）。

根据 iphone 官方文档，iphonex 顶部状态栏的适配安全区域高度为 44pt，底部操作条区域高度为 34pt（一些系统 bar 的默认高度设备可能会变化，建议以凯发app官方网站官网给出的为准）。

也可在 .acss 中使用

safe-area-inset-bottom

、

safe-area-inset-top

分别对iphonex 顶部状态栏的安全区域高度、底部操作条区域高度进行兼容，例如：

/** button.acss **/

.sm-button {

margin-top: env(safe-area-inset-top);

margin-bottom: env(safe-area-inset-bottom);

}

通过

my.getsysteminfo

获取设备信息，判断出 iphonex 设备类型；

注意

：

○

model 值的格式： iphone x(gsm cdma)，因此需要用字符串检索匹配进行判断。

○

建议设置 globaldata 全局数据增加一个适配标识，在 onlaunch 中调用适配逻辑。

自定义标题栏详情可查看

设置小程序标题栏透明介绍

；自定义标签栏（tabbar）以及页面底部的吸底按钮，可以通过小程序的

my.navigateto

自行实现。

注意

：样式像素换算可查看

acss 语法参考

。

判断 iphonex 系列的手机机型

通过 my.getsysteminfo 接口返回的 model 参数判断机型，iphone x model 参数返回 iphone10,3 或 iphone10,6，以此为判断依据。

对于 iphone，model 参数将返回 iphone 内部代码（internal name）。

iphone 手机型号与对应的 model 返回值可查看

model 参数

（以苹果官方提供的为准）。

上一篇：小程序中base64数据解码&编码示例下一篇：支付宝身份验证接入流程

相关问题