用于移动端安全区域边距的新 CSS 变量
现在，在 Shopify Mobile 上运行的嵌入式应用可以使用一个新的 CSS 自定义属性 --shopify-safe-area-inset-bottom。该属性提供主机 UI 覆盖层（例如浮动底部导航栏）的确切像素值，以防止应用将这些固定位置的内容放置在覆盖层之上。
- var(--shopify-safe-area-inset-bottom) 由 App Bridge 自动设置。当没有覆盖层时，它默认为 0px；当移动设备浮动底部栏处于活动状态时，它会调整为覆盖层高度的 CSS 像素值。
- 此变量会自动为 <body> 添加底部内边距，确保大多数应用无需额外操作即可正常运行，且内容不会被浮动栏遮挡。
- 如果您的应用包含自定义的固定底部元素，例如粘性页脚或浮动操作按钮（FAB），请将该变量纳入您的样式中：
受影响对象
所有在 Shopify Mobile 上运行且使用视口底部固定或粘性元素的嵌入式应用。
变更生效时间
这些变更将于 2026 年 4 月 15 日对所有受影响的应用实施。
您需要采取的措施
对于大多数应用而言，无需采取任何措施，因为底部内边距已自动应用。然而，如果您的应用具有自定义的固定底部 UI 元素，请在 CSS 中使用 var(--shopify-safe-area-inset-bottom, 0px)，以确保这些元素位于原生浮动底部栏之上。
参考资料
- https://shopify.dev/docs/api/app-home/apis/authentication-and-data/environment-api