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:
parent
93f2cd6525
commit
c4f28ae471
@ -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 (
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user