当前位置: 首页 > 工具软件 > drawer-iphone > 使用案例 >

h5页面 iPhoneX底部保留安全距离

左丘兴生
2023-12-01

H5页面底部会被 iPhone x 底部的横条覆盖,不方便操作。只需要在被挡住的容器div或者view添加css即可。
css代码如下:

/* 适配iphonex 有底部横条的 */
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.uni-drawer {   //你的容器选择器名称
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
		}
	}
 类似资料: