在微信小程序中，padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom); 这两个 CSS 属性用于处理 iPhone X 及更高版本设备的安全区域（safe area）。这些设备的底部有一个“Home Indicator”，为了避免内容被这个指示器遮挡，可以使用这些属性来动态调整底部的内边距。

详细说明

1. constant(safe-area-inset-bottom):

   • 这是旧的语法，用于 iOS 11.2 及更早版本。
   • 在 iOS 11.2 及更高版本中，推荐使用 env(safe-area-inset-bottom)。

2. env(safe-area-inset-bottom):

   • 这是新的语法，推荐使用。
   • 适用于 iOS 11.2 及更高版本。

使用示例

为了确保兼容性，通常会同时使用这两个属性。以下是一个示例，展示了如何在微信小程序中使用这些属性来处理安全区域。

示例代码

/* app.wxss */
.container {display: flex;flex-direction: column;height: 100vh;padding-bottom: constant(safe-area-inset-bottom); /* 旧的语法 */padding-bottom: env(safe-area-inset-bottom); /* 新的语法 */
}.content {flex: 1;background-color: #f0f0f0;
}.footer {background-color: #fff;padding: 10px;text-align: center;border-top: 1px solid #ccc;
}

解释

1. .container 类:

   • 使用 padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom); 来确保内容不会被底部的 Home Indicator 遮挡。
   • height: 100vh; 使容器占满整个视口高度。

2. .content 类:

   • 使用 flex: 1; 使内容区域占据剩余的空间。

3. .footer 类:

   • 这是一个示例底部栏，确保底部栏不会被 Home Indicator 遮挡。

完整示例

以下是一个完整的示例，展示了如何在微信小程序中使用这些属性。

app.json

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "Safe Area Example"}
}

app.wxss

/* app.wxss */
.container {display: flex;flex-direction: column;height: 100vh;padding-bottom: constant(safe-area-inset-bottom); /* 旧的语法 */padding-bottom: env(safe-area-inset-bottom); /* 新的语法 */
}.content {flex: 1;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;
}.footer {background-color: #fff;padding: 10px;text-align: center;border-top: 1px solid #ccc;
}

pages/index/index.js

// pages/index/index.js
Page({data: {message: 'Hello, Safe Area!'}
})

pages/index/index.json

{}

pages/index/index.wxml

<!-- pages/index/index.wxml -->
<view class="container"><view class="content"><text>{{message}}</text></view><view class="footer"><text>Footer Content</text></view>
</view>

pages/index/index.wxss

/* pages/index/index.wxss */
/* 这里可以添加特定于该页面的样式 */

总结

通过在 CSS 中使用 padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom);，可以确保微信小程序的内容不会被 iPhone X 及更高版本设备的底部 Home Indicator 遮挡。这样可以提升用户体验，确保内容在不同设备上的显示效果一致。

如有开发的需求联系我