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.
This commit is contained in:
kyuuseiryuu 2026-03-16 09:43:07 +09:00
parent 93f2cd6525
commit c4f28ae471
2 changed files with 15 additions and 1 deletions

View File

@ -2,6 +2,7 @@ import { HeartOutlined, ScheduleOutlined, SearchOutlined, UserOutlined } from "@
import { Button, Flex } from "antd"; import { Button, Flex } from "antd";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import styled from "styled-components"; import styled from "styled-components";
import { isRunningStandalone } from "../utils/front";
const StyledContainer = styled.div` const StyledContainer = styled.div`
position: fixed; position: fixed;
@ -12,12 +13,13 @@ const StyledContainer = styled.div`
background: #181818; background: #181818;
font-size: 16px; font-size: 16px;
padding: 8px; padding: 8px;
padding-bottom: 34px; padding-bottom: ${isRunningStandalone() ? '34px' : ''};
box-sizing: border-box; box-sizing: border-box;
.ant-btn { .ant-btn {
padding: 24px; padding: 24px;
} }
`; `;
export const AppBar = () => { export const AppBar = () => {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (

View File

@ -17,6 +17,18 @@ interface MapLocation {
name?: string; // 目的地名称 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 => { export const isMobile = (): boolean => {
const ua = navigator.userAgent; const ua = navigator.userAgent;
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua); return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);