diff --git a/src/App.vue b/src/App.vue
index fcca44ca8..7fadfce3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,29 @@ const { subs, flows } = storeToRefs(subsStore);
 
 const allLength = ref(null);
 
+// 处于 pwa 且屏幕底部有小白条时将底部安全距离写入 global store
+type NavigatorExtend = Navigator & {
+  standalone?: boolean;
+};
+const navigator: NavigatorExtend = window.navigator;
+
+// 判断是否为非全面屏设备
+function isLegacyDevices() {
+  const screenWidth = window.screen.width;
+  const screenHeight = window.screen.height;
+  if (
+    (screenWidth === 375 && screenHeight === 667) ||
+    (screenWidth === 414 && screenHeight === 736)
+  ) {
+    return true;
+  }
+  return false;
+}
+
+globalStore.setBottomSafeArea(
+  navigator.standalone && !isLegacyDevices() ? 18 : 0
+);
+
 // 如果带有 url 参数配置 api，则将其添加到 api 列表并切换
 const { handleUrlQuery } = useHostAPI();
 handleUrlQuery({
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 0cfdc8c68..4dda8000d 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -39,7 +39,16 @@
   const settingsStore = useSettingsStore();
   const { appearanceSetting } = storeToRefs(settingsStore);
 
-  const { env } = storeToRefs(globalStore);
+  const {
+    bottomSafeArea,
+    // istabBar,
+    // istabBar2,
+    env
+  } = storeToRefs(globalStore);
+  const style = {
+    height: `${bottomSafeArea.value + 12 + 44}px`,
+    paddingBottom: bottomSafeArea.value + 'px',
+  };
   onBeforeRouteUpdate((to, from, next) => {
     activeTab.value = routeList.indexOf(to.path);
     // const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
@@ -53,7 +62,7 @@
     z-index: 101;
     .tabbar {
       padding-top: 8px;
-      padding-bottom: env(safe-area-inset-bottom);
+      padding-bottom: v-bind('style.paddingBottom');
       box-shadow: none;
       backdrop-filter: blur(var(--tab-bar-blur));
       -webkit-backdrop-filter: blur(var(--tab-bar-blur));