【偏门药方】CSS安全距离怎么在JS里获取Phone更新底部小黑条之后，我们在页面开发时就需要考虑安全距离的问题了，不过

病症澄清

自从iPhone更新出顶部刘海和底部小黑条之后，我们在页面开发时就需要考虑安全距离的问题了，不过好在iPhone有配套的CSS安全距离样式safe-area-inset-*。但是在JS里面想拿到这个安全距离该怎么拿呢？

/* 可以通过增加padding-bottom来适配 */
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

/* 可以通过margin-bottom来适配 */
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

/* 或者改变高度*/
height: calc(55px +  constant(safe-area-inset-bottom));
height: calc(55px +  env(safe-area-inset-bottom));

那么在JS中怎么获取上述安全区的参数呢？

可以使用一个十分古早的函数来获取 -- getComputedStyle()

body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

如上面的代码，在全局层面定义了一个padding-bottom来处理iPhone系列的安全距离。在绝大部分的页面布局中，都没问题，但是有一种情况比较尴尬。一个有顶部栏且全局处理了iPhone系列的安全距离的页面，下面有一块可以垂直滚动的区域。

这个时候如果我们直接用100vh - 底部栏高度来作为滚动容器的高度，在浏览器调试的时候是没什么问题的，但是iPhone真机调试的时候就会有问题了。

因为在body底部还有个padding用来处理安全距离，当滚动容器滚到底部的时候，还能再往下滑，从而把整个页面都上移了一点，交互体验会比较差。

这个情况就很适合使用getComputedStyle在逻辑层面获取安全距离，然后计算出滚动视窗的正确高度。

body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

const gap = getComputedStyle(document.body).getPropertyValue('padding-bottom').replace('px', '')

const scrollViewHeight = `100vh - ${headerHeight} - ${gap}`

看到这里肯定有同学会想到，如果我们项目没有在全局处理安全距离要怎么拿到这个距离值呢？

这里笔者也试了一个方案，我们可以在全局增加一个隐藏节点，后续需要获取安全距离的时候都去找这个节点拿就行了。

这样我们依然可以在任意地方获取到安全距离，并且也不会对其他页面造成影响。

药方开出

CSS中可以使用env(safe-area-inset-bottom)或者constant(safe-area-inset-bottom)很便捷的拿到安全距离，借助CSS的计算属性可以应对90%的场景。

但如果一定要在JS逻辑层用到这个安全距离，则可以利用getComputedStyle以及隐藏节点来获取到安全距离的具体数值，然后进行其他逻辑操作。