Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-27 23:34:48 +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

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