小程序适配底部home区域

孤月葬花魂

已于 2023-08-02 16:31:50 修改

阅读量247

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序

于 2022-12-15 16:10:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49524462/article/details/128331370

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种针对iPhone X及后续机型底部安全区域的适配方案，通过使用WXSS变量来实现页面内容在不同设备底部的有效填充，确保了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序适配底部home区域

app.wxcss

page {
	/* 必须再page标签下定义，其他地方才能使用，否则需要在其他地方在定义一次 */
  	--iphonex-fix-bottom: 0;
	--iphonex-fix-bottom: constant(safe-area-inset-bottom);
	--iphonex-fix-bottom: env(safe-area-inset-bottom);
}
.full-screen {
  	min-height: 100vh;
	padding-bottom: var(--iphonex-fix-bottom) !important;
}