diff --git a/README.md b/README.md index 40ddc24..ec69a61 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ - 第一分開始後,`設定隊伍` 會改成 `上一步`。 - `比賽結算` 需要長按 `1` 秒才會觸發,避免誤觸。 - 達標分數後有獲勝動畫與結算流程。 + - 手機上會盡量壓縮成單頁滿版,避免上下滑動。 - 羽球規則 - 預設 `21` 分制,可在設定隊伍時調整目標分數。 - 支援 Deuce:`20:20` 後需領先 `2` 分才獲勝。 @@ -76,6 +77,13 @@ npm run lint npm run build ``` +## 記分板滿版模式 + +- 記分板頁面會套用 `100dvh` 高度。 +- 手機進入記分板時會關閉頁面捲動與 overscroll。 +- `viewport` 已加上 `viewport-fit=cover`,較能貼合 iPhone / iPad 安全區。 +- 若手機高度較矮,會再縮小字級、按鈕與分數區,盡量維持整頁顯示。 + ## 環境變數 請先建立 `.env`: diff --git a/index.html b/index.html index 5dae752..ce33792 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + window.clearTimeout(timer) }, [navigationLockMessage]) + useEffect(() => { + document.body.classList.toggle('body-scoreboard', isScoreboardRoute) + + return () => { + document.body.classList.remove('body-scoreboard') + } + }, [isScoreboardRoute]) + useEffect(() => { const handlePwaUpdateReady = () => { setPwaUpdateReady(true) @@ -908,7 +916,7 @@ function App() { } return ( -
Badminton Scoreboard
diff --git a/src/index.css b/src/index.css index be06b3e..a6356dc 100644 --- a/src/index.css +++ b/src/index.css @@ -37,6 +37,11 @@ body { linear-gradient(180deg, var(--page-bg), var(--page-bg-2)); } +body.body-scoreboard { + overflow: hidden; + overscroll-behavior: none; +} + body::before { content: ''; position: fixed; @@ -53,6 +58,11 @@ body::before { min-height: 100vh; } +body.body-scoreboard #root { + min-height: 100dvh; + overflow: hidden; +} + input, textarea, select,