diff --git a/miniprogram/utils/__tests__/safeArea.style.test.mjs b/miniprogram/utils/__tests__/safeArea.style.test.mjs
index d21e306c0..5f8a727f6 100644
--- a/miniprogram/utils/__tests__/safeArea.style.test.mjs
+++ b/miniprogram/utils/__tests__/safeArea.style.test.mjs
@@ -12,4 +12,13 @@ assert.equal(style['--sq-safe-top'], '44px')
 assert.equal(style['--sq-nav-height'], '40px')
 assert.equal(style['--sq-header-height'], '84px')
 assert.equal(style['--sq-capsule-right-safe'], '96px')
+
+const noCapsuleStyle = buildSafeAreaCssVarsStyle({
+  topSafeHeight: 20,
+  navContentHeight: 44,
+  headerHeight: 64,
+  capsuleRightSafeWidth: 0,
+})
+
+assert.equal(noCapsuleStyle['--sq-capsule-right-safe'], '0px')
 console.log('ok')
diff --git a/miniprogram/utils/safeArea.js b/miniprogram/utils/safeArea.js
index bc3a3710f..729a5db7f 100644
--- a/miniprogram/utils/safeArea.js
+++ b/miniprogram/utils/safeArea.js
@@ -62,10 +62,10 @@ export function computeSafeAreaMetrics() {
 export function applySafeAreaCssVars(metrics) {
   if (typeof document === 'undefined' || !document?.documentElement) return
   const root = document.documentElement.style
-  root.setProperty('--sq-safe-top', `${metrics.topSafeHeight}px`)
-  root.setProperty('--sq-nav-height', `${metrics.navContentHeight}px`)
-  root.setProperty('--sq-header-height', `${metrics.headerHeight}px`)
-  root.setProperty('--sq-capsule-right-safe', `${metrics.capsuleRightSafeWidth}px`)
+  const style = buildSafeAreaCssVarsStyle(metrics)
+  Object.entries(style).forEach(([key, value]) => {
+    root.setProperty(key, value)
+  })
 }
 
 export function initGlobalSafeArea() {