怎样写一个适配iPhoneX的底部导航?

日期:2018-10-18点击:81

iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢?


首先了解安全区域(safe area)的概念,它保证了内容在设备上的正确嵌入,不会被状态栏、导航栏等遮挡。


-- by Apple's Human Interface Guidelines (通过苹果的人机界面指南)

引言.jpg

图一


对于h5页面来说,通常是在浏览器或app的webview这样的“容器”中打开,这些容器大都会做这样的适配:

QQ截图20181018154656.jpg

图二


可以看到,这些容器都会保证页面顶部在安全区内,而为了保证全屏体验的效果,底部会占满屏幕。

在不考虑横屏浏览的情况下,我们只需要对底部导航做一个适配就可以了

如下图所示,iPhoneX底部的危险区域高度为34pt,对应@3x页面像素值为102px。我们可以根据这个值对底部导航做适配。

图2配置.jpg

图三

底部导航适配三法

1. js基本实现

js适配方法1.jpg


2.js动态适配

如上图二所示,针对有底部栏的浏览器,页面滚动过程中底部栏显示、隐藏的情况,我们可以做一个动态适配:

js适配2.jpg


3.纯css实现

js3.jpg


总结

js实现除了不够优雅没啥毛病,css实现因为是依赖于ios11版本的safari,有兼容性问题(测试发现内核为AppleWebkit/604.3.5的qq浏览器不支持,其他浏览器正常。具体兼容到哪个版本还未查到相关资料)


References


1.iPhone X - Overview - iOS Human Interface Guidelines


2.三分钟弄懂iPhoneX设计尺寸和适配


3.“The Notch” and CSS


4.Designing Websites for iPhone X


5.iPhone X layout features with CSS Environment variables(需翻墙)


6.CSS Round Display Level 1








张生:13751841126
梁生:13826047785
.com