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

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

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

图一

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

图二

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

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

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

图三

底部导航适配三法

1. js基本实现

2.js动态适配

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

3.纯css实现

总结

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