基础需求-有小黑条时，底部元素不被挡住
众所周知，ios手机底部会有小黑条，在编写页面的时候，如果页面底部元素与小黑条没有保留安全的边距，则底部元素可能会被小黑条挡住
这个问题解决的方法也很简单，使用safe-area-inset-bottom即可 developer.mozilla.org/zh-CN/docs/…
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
进阶需求-没小黑条时，底部按钮和页面保留10px下边距
此时这个问题就变得稍微有点复杂起来，原因如下：
- 底部小黑条安卓和ios部分机型有，部分机型没有、
- 有小黑条的部分安卓手机safe-area-inset-bottom可能会为0。
- 有小黑条safe-area-inset-bottom为0的问题和手机型号,手机系统版本，浏览器内核与版本均相关
由于js是无法获取safe-area-inset-bottom的具体数值的，再加上问题2，3的情况，基本上否决了使用js来处理这个问题的可能性。css的问题还是要用css来解决，此时max函数就派上用场了
padding-bottom: Max(constant(safe-area-inset-bottom, 10px), 10px);
padding-bottom: Max(env(safe-area-inset-bottom, 10px), 10px);
