开发 | 小程序如何快速适配 iPhone X?

作者:张少壮

知晓程序注:

iPhone X 推出已经有些日子了,越来越多人用上了这款「带刘海」的手机。

但是,由于 iPhone X 的「异型」屏幕,以及底部的「小白条」的存在,不少开发者都头疼应该如何适配这块略显奇怪的屏幕。

在小程序上,我们应该如何快速适配 iPhone X 呢?本期,知晓程序就来与大家探讨,小程序应该如何快速适配 iPhone X?

随着第二、三批 iPhone X 的陆续到货,身边的土豪们纷纷用了起来。又因为 iPhone X 的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找 bug 中。

不出所料,「豌豆公主」小程序在一些地方也出现了一丢丢体验不好的地方。首当其冲的,是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条(俗称「小白条」)重叠,这样在点击下方按钮时很容易误触发手势操作。

是 bug 就得修,是体验问题就得优化,于是立马搞了一台 iPhone X 开始研究。

网页端的适配还好,有 viewport meta 标签,以及下面的方案进行处理。

但小程序就比较尴尬了。

从四个角被裁掉的表现,可以推测小程序里的 viewport-fit 默认为 cover,但是没有接口去更改。所以,网页端通过 viewport-fix=coverconstant(safe-area-inset-bottom); 的适配方案不适合小程序。

目前,也没有看到小程序有对 iPhone X 等异形屏有特殊的接口或字段。小程序本身的底部 tab 栏对 iPhone X 的适配,也只是简单的加了一个白色底栏,提高了原有 tab 栏的位置。

为什么这么说呢?因为这一点可以从我们购物车页面看出,购物车页吸底操作并非通过 position: fixed; bottom: 0; 实现的,而是根据 windowHeight 减去自身高度,计算 top 值,从而模拟的吸底。

在小程序新版本自身适配 iPhone X 后,导致购物车底部按钮被盖住了一半,由此得出上面的结论(当然,此处为猜测)。

言归正传,既然没有特殊的方案获取该值,我们只能通过 wx.getSystemInfo 接口取获取设备信息,该接口使用方法如下:

其中,res.model 便是设备的型号等信息,如果 model 中包含 iPhone X 字样,便可认为该设备为 iPhone X。我们在 app.js 中进行检测,然在全局增加一个 isIpx 字段,用于判断机型。

在子页面中可以读取该值,举个商品详情页的栗子:

于是,一个简单的适配 iPhone X 底部圆角的方案就完成了。

至于为什么是 68 rpx:因为 iPhone X 的屏幕宽度和 iPhone 6 一样,都是 375 pt,但高度要比 iPhone 6 高了 145 pt。而小程序中 750 rpx = 375 pt = 750 物理像素,换算一下,就可以得出这个结论了。

最最后,iPhone X 壕可以扫描下面小程序码进行体验,欢迎拍砖指正~

「豌豆公主」小程序使用链接

https://minapp.com/miniapp/5112/

原文地址:

https://juejin.im/post/5a1d396551882546d71f157b

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-12-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

面向设计的半封装web组件开发 - 腾讯ISUX

1994
来自专栏服务端技术杂谈

双管齐下:同时设计 iOS 和 Anroid

不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和...

3605
来自专栏Fundebug

ReactJS vs Angular 5 vs Vue.js - 哪个框架更好?

译者按: 在全球大范围看,React和Angular依然遥遥领先,Vue.js这位后起之秀还需努力做到全球化!

1966
来自专栏司想君

2017年前端开发手册一-2016前端技术回顾

2017年前端开发手册公布了,从今天开始陆续为大家送上翻译文章。每日一篇,今天是第一篇,是作者对2016年前端圈的一次技术回顾。 PS:附上一首目前金曲榜第...

3355
来自专栏小狼的世界

Axure制作Tab切换效果

axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。

1413
来自专栏SAP最佳业务实践

SAP S/4HANA最佳业务实践:Order-to-Cash订单到收款-2客户360度视图

Details of the Object Page Customer -360°View客户360度视图 –Header 概览 –Contacts 合同 –S...

29211
来自专栏進无尽的文章

干货篇-一些有用的链接

iOS超全开源框架、项目和学习资料汇总(5)AppleWatch、经典博客、三方开源总结篇

1001
来自专栏IT平头哥联盟

该如何正确的使用SVG sprites?

    大家好,这里是@IT·平头哥联盟,我是`首席填坑官`——苏南,今天要给大家分享的是SVG sprite(也叫雪碧图),所谓雪碧图,当然就不是我们常喝的雪...

872
来自专栏分布式系统和大数据处理

React与Redux开发实例精解

因为我身边掌握React技术栈的同事极少,所以一直只是自己在研究和实践。因此,买这本书想看看其他人都是如何使用这些技术的。从这点上来看,这本书确实起到了这样的作...

1703
来自专栏腾讯社交用户体验设计

你还在用轮播图吗

2003

扫码关注云+社区

领取腾讯云代金券