专栏名称: 蚂蚁金服ProtoTeam
数据前端团队
目录
相关文章推荐
51好读  ›  专栏  ›  蚂蚁金服ProtoTeam

记一次 Weex 的 iPhone X 适配

蚂蚁金服ProtoTeam  · 掘金  · 前端  · 2017-12-08 00:46

正文

请到「今天看啥」查看全文


, "subtype" : "2436h" , "filename" : "[email protected]" , "minimum-system-version" : "11.0" , "orientation" : "landscape" , "scale" : "3x" }, { // other conf } ], "info" : { "version" : 1, "author" : "xcode" } }

再添加两张 1125×2436 的图片,记得名字需要和 filename 匹配,然后重新构建,你就会发现,他全屏啦!

同 native 适配有何不同

Weex 针对 iPhone X 的兼容直接发生在前端开发层面。

「不会搞 Native 是前提」,有了这个前提,我们就只能自己动手了。

动手的原则就是,「合理利用每寸空间,将内容展示在安全区内」。

什么是安全区

安全区 是苹果用来描述 iPhone X 的合理显示区域。

手机纵向持握状态下,安全区是从屏幕最顶端往下 44 pt 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置上,从下往上推 34 pt 以上的部分开始才被视为安全区。

至于横向就不好描述了,直接上图吧。

更多关于 iPhone X UI 适配的概念可以看看 这篇文章

方向

原则上,我们是将内容显示在安全区内,但一定是在「自然过度」的前提下。







请到「今天看啥」查看全文