Taro+微信小程序 webview 嵌套的h5页面 适配 苹果底部状态栏
时间: 2023-12-11 12:04:18 浏览: 40
苹果底部状态栏的高度为 34px,可以通过媒体查询(media query)来适配。具体做法是在 CSS 文件中添加以下代码:
```css
@media only screen and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
/* iPhone X, XS, 11 Pro */
.footer {
padding-bottom: 34px;
}
}
@media only screen and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2) {
/* iPhone XR, 11 */
.footer {
padding-bottom: 34px;
}
}
@media only screen and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 3) {
/* iPhone XS Max, XR, 11 Pro Max */
.footer {
padding-bottom: 34px;
}
}
```
其中,`.footer` 为需要适配的元素,可以替换为实际需要适配的元素的选择器。在 iPhone X、XS、11 Pro 上,设备宽度为 375px,设备像素比为 3,因此需要匹配 `max-device-width: 812px` 和 `-webkit-device-pixel-ratio: 3`;在 iPhone XR、11 上,设备宽度为 414px,设备像素比为 2,因此需要匹配 `max-device-width: 896px` 和 `-webkit-device-pixel-ratio: 2`;在 iPhone XS Max、XR、11 Pro Max 上,设备宽度为 414px,设备像素比为 3,因此需要匹配 `max-device-width: 896px` 和 `-webkit-device-pixel-ratio: 3`。适配时,只需要在对应的媒体查询中添加需要适配的样式即可。