如何写一个适配iPhoneX的底部导航

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

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

Apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

-- by Apple\'s Human Interface Guidelines

图1

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

图2

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

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

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

图3

底部导航适配三法 1. js基本实现

var isIphoneX = window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && testUA(\'iPhone\') if (isIphoneX) { document.body.classList.add(\'fix-iphonex-bottom\') } function testUA (str) { return navigator.userAgent.indexOf(str) > -1 } .fix-iphonex-bottom .navi[data-v-539b7842]{ padding-bottom: 34px; }