From 08c979c93905d6316f5556d83b2931d2c7595bc7 Mon Sep 17 00:00:00 2001 From: shimonz Date: Tue, 29 Jul 2025 15:16:38 +0800 Subject: [PATCH 1/2] fix: pwa ios safari safe area inset for bottom navigation - Add viewport-fit=cover meta tag for PWA fullscreen display on iOS - Implement safe-area-inset-bottom for mobile bottom navigation bar - Update PageLayout main content padding to avoid iOS home indicator overlap - Add CSS utility class pb-safe-bottom for PWA safe area handling - Ensure proper PWA layout on iOS devices with notch and home indicator - Set minimum navigation height including safe area for PWA compatibility --- VERSION.txt | 2 +- src/app/globals.css | 10 ++++++++++ src/app/layout.tsx | 5 +++++ src/components/MobileBottomNav.tsx | 1 + src/components/PageLayout.tsx | 5 +++-- src/lib/version.ts | 2 +- 6 files changed, 21 insertions(+), 4 deletions(-) diff --git a/VERSION.txt b/VERSION.txt index 43c5cbf..4847fb2 100644 --- a/VERSION.txt +++ b/VERSION.txt @@ -1 +1 @@ -20250728125318 \ No newline at end of file +20250729151638 \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index ba4907b..946256a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -11,6 +11,11 @@ .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } + + /* iOS Safari 安全区域工具类 */ + .pb-safe-bottom { + padding-bottom: env(safe-area-inset-bottom); + } } :root { @@ -23,10 +28,15 @@ body { overflow-x: hidden; /* 阻止 iOS Safari 拉动回弹 */ overscroll-behavior: none; + /* 支持 iOS Safari 安全区域 */ + padding: env(safe-area-inset-top) env(safe-area-inset-right) + env(safe-area-inset-bottom) env(safe-area-inset-left); } body { color: rgb(var(--foreground-rgb)); + /* iOS Safari 安全区域背景适配 */ + background-color: #f7f7f3; } html:not(.dark) body { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2e53bb8..03c7c0f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -31,6 +31,7 @@ export async function generateMetadata(): Promise { export const viewport: Viewport = { themeColor: '#000000', + viewportFit: 'cover', }; export default async function RootLayout({ @@ -68,6 +69,10 @@ export default async function RootLayout({ return ( + {/* 将配置序列化后直接写入脚本，浏览器端可通过 window.RUNTIME_CONFIG 获取 */} {/* eslint-disable-next-line @next/next/no-sync-scripts */}