CSS设置移动端页面底部安全距离

如图：在开发微信小程序时遇到的按钮被iOS设备底部黑线遮挡的问题，以及如何利用CSS中的env(safe-area-inset-bottom)属性来创建安全区域，避免内容被遮挡。通过将该属性应用到padding或height上，成功解决了问题

env(safe-area-inset-bottom)是一个CSS属性值，用于设置底部安全距离。它表示使用环境变量来获取底部安全距离的值。当使用环境变量时，需要使用env()函数来引用具体的环境变量。例如：

 

body {
  padding-top: constant(safe-area-inset-top);  /* iOS */
  padding-top: env(safe-area-inset-top);        /* Android */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS */
  padding-bottom: env(safe-area-inset-bottom);       /* Android */
}