小程序解决 iOS 边界滚动橡皮筋效果问题记录
warning:
这篇文章距离上次修改已过232天，其中的内容可能已经有所变动。
/* 针对 iOS 设备的边界滚动的边缘调整 */
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
.container {
/* 底部安全区域调整 */
padding-bottom: constant(safe-area-inset-bottom); /* 针对 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 针对 iOS >= 11.2 */
}
.tabbar {
/* 底部选项卡的安全区域调整 */
padding-bottom: constant(safe-area-inset-bottom); /* 针对 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 针对 iOS >= 11.2 */
}
}这段代码使用了CSS的@supports规则来检测iOS设备上是否存在安全区域的特定支持特性，并据此添加对容器和底部选项栏的安全区域内边距调整。这样可以确保在iOS设备上，尤其是有边缘圆角的小程序底部不会出现溢出的边缘滚动效果。
评论已关闭