From c4f28ae4717c2dbd9ac1788966e80a66637650da Mon Sep 17 00:00:00 2001
From: kyuuseiryuu <kyuuseiryuu@gmail.com>
Date: Mon, 16 Mar 2026 09:43:07 +0900
Subject: [PATCH] feat(app-bar): detect standalone mode and adjust padding

- Added `isRunningStandalone` utility in `src/utils/front.ts` to detect if the app is running as a standalone PWA or in a native container (iOS Safari, Android Chrome, etc.).
- Updated `AppBar.tsx` to conditionally apply bottom padding only when running in standalone mode, ensuring better layout alignment within custom containers.
---
 src/components/AppBar.tsx |  4 +++-
 src/utils/front.ts        | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
index 667d897..06ace64 100644
--- a/src/components/AppBar.tsx
+++ b/src/components/AppBar.tsx
@@ -2,6 +2,7 @@ import { HeartOutlined, ScheduleOutlined, SearchOutlined, UserOutlined } from "@
 import { Button, Flex } from "antd";
 import { useNavigate } from "react-router";
 import styled from "styled-components";
+import { isRunningStandalone } from "../utils/front";
 
 const StyledContainer = styled.div`
   position: fixed;
@@ -12,12 +13,13 @@ const StyledContainer = styled.div`
   background: #181818;
   font-size: 16px;
   padding: 8px;
-  padding-bottom: 34px;
+  padding-bottom: ${isRunningStandalone() ? '34px' : ''};
   box-sizing: border-box;
   .ant-btn {
     padding: 24px;
   }
 `;
+
 export const AppBar = () => {
   const navigate = useNavigate();
   return (
diff --git a/src/utils/front.ts b/src/utils/front.ts
index b428df0..5704757 100644
--- a/src/utils/front.ts
+++ b/src/utils/front.ts
@@ -17,6 +17,18 @@ interface MapLocation {
   name?: string; // 目的地名称
 }
 
+export function isRunningStandalone() {
+    // 兼容 iOS Safari
+    if ((window as any).navigator.standalone === true) {
+        return true;
+    }
+    // 兼容其他浏览器（如 Android Chrome）
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+        return true;
+    }
+    return false;
+}
+
 export const isMobile = (): boolean => {
   const ua = navigator.userAgent;
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);