场景和之前的其他手机相比，iPhoneX的屏幕顶部变成了海屏，底部的物理按键也改成了小黑条.新的适配问题。比如一些需要粘贴在底部的按钮，以及凸起的tabBar和底部弹出框，在iPhoneX上，内容会被小黑条挡住，或者页面出现白色空隙。先解决代码
body{height:100vh;}/*你的底部元素↓*/.container{position:absolute;底部：0；padding-bottom:constant(safe-area-inset-bottom);/*兼容iOS<11.2*/padding-bottom:env(safe-area-inset-bottom);/*兼容iOS>=11.2*/...}几个新知识safeareasafearea指的是一个可见的窗口范围，在safearea中的内容不受边角、sensorhousing、HomeIndicator的影响，如图下图中蓝色区域：苹果官方文档：adaptivity-and-layoutviewport-fitiOS11newfeatures，为了适配iPhoneX，苹果对现有的viewportmeta标签进行了扩展。用于设置网页在可见窗口中的布局。可以设置三个值：contain：可见窗口完全包含网页内容（左图）cover：网页内容完全覆盖可见窗口（右图）auto：默认值，与contain一致
参考文档：viewport-fit-descriptorenviOS11newfeature，Webkit的一个CSS函数，用于在CSS中插入用户代理定义的变量来设置安全区域到边界的距离，有四个预定义变量：safe-area-inset-left：距安全区域的距离左侧边界safe-area-inset-right的区域：安全区域域与右边界之间的距离safe-area-inset-top：安全区域与上边界之间的距离safe-area-inset-bottom：安全区域与下边界之间的距离env()必须是与viewport-fit=cover!一起使用！我们最常用的是safe-area-inset-bottom，这个代表不被小黑条挡住的安全距离padding-bottom:env(safe-area-inset-bottom);参考文档：designing-websites-for-iphone-x，MDN/env()referencehttps://aotu.io/notes/2017/11...
