在微信小程序中，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 遮擋。這樣可以提升用戶體驗，確保內容在不同設備上的顯示效果一致。

如有開發的需求聯系我