Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-21 17:24:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: pwa ios safari safe area inset for bottom navigation

Browse Source 
- 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
This commit is contained in:
shimonz
2025-07-29 15:16:38 +08:00
parent 67b6132780
commit 08c979c939
6 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
VERSION.txt
View File

@@ -1 +1 @@
20250728125318
20250729151638

10
src/app/globals.css
View File

@@ -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 {

5
src/app/layout.tsx
View File

@@ -31,6 +31,7 @@ export async function generateMetadata(): Promise<Metadata> {
export const viewport: Viewport = {
themeColor: '#000000',
viewportFit: 'cover',
};
export default async function RootLayout({
@@ -68,6 +69,10 @@ export default async function RootLayout({
return (
<html lang='zh-CN' suppressHydrationWarning>
<head>
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, viewport-fit=cover'
/>
{/* 将配置序列化后直接写入脚本，浏览器端可通过 window.RUNTIME_CONFIG 获取 */}
{/* eslint-disable-next-line @next/next/no-sync-scripts */}
<script

1
src/components/MobileBottomNav.tsx
View File

@@ -58,6 +58,7 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
/* 紧贴视口底部，同时在内部留出安全区高度 */
bottom: 0,
paddingBottom: 'env(safe-area-inset-bottom)',
minHeight: 'calc(3.5rem + env(safe-area-inset-bottom))',
}}
>
<ul className='flex items-center'>

5
src/components/PageLayout.tsx
View File

@@ -40,9 +40,10 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
{/* 主内容 */}
<main
className='flex-1 md:min-h-0 mb-14 md:mb-0'
className='flex-1 md:min-h-0 pb-safe-bottom md:pb-0'
style={{
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
paddingBottom:
'max(3.5rem, calc(3.5rem + env(safe-area-inset-bottom)))',
}}
>
{children}

2
src/lib/version.ts
View File

@@ -2,7 +2,7 @@
'use client';
const CURRENT_VERSION = '20250728125318';
const CURRENT_VERSION = '20250729151638';
// 版本检查结果枚举
export enum UpdateStatus {