行動版賽程頁面顯示不全怎麼辦

為什麼手機瀏覽器會把內容藏起來

在手機上，瀏覽器的網址列不是固定不動的。使用者一滑動，它就會展開或收起，可視區域的高度也跟著即時改變。原本按照固定像素高度設計的頁面，就可能無預警地少掉最上面或最下面那一塊。

對撲克賽程頁面來說，這是個很實際的麻煩。賽程是一長串密密麻麻的資訊：賽事、買入金額、開賽時間、盲注結構。如果網址列蓋住頁首，玩家可能看不到今天是哪一天、哪個系列賽；如果蓋住頁尾，可能就漏掉導覽連結或表格最後幾列。

視窗高度單位的陷阱

內容被藏住，常見的原因就是用了視窗高度單位。在 CSS 裡，100vh 指的是視窗高度，但在手機瀏覽器上，它通常指的是「最大可能」的視窗高度，也就是網址列收起時的那個高度。當網址列顯示出來，實際可視範圍就比 100vh 還小。

結果就是：一個滿版高度的版面會延伸到螢幕可視範圍之下。貼齊底部的元素，例如固定在底部的篩選列或「下一頁」按鈕，就可能被瀏覽器介面壓在下面。

現代 CSS 已經有替代方案。動態視窗單位 dvh、小型視窗單位 svh，就是專門用來跟著視窗變化走的。把 height: 100vh 改成 min-height: 100dvh，是滿版版面很典型的修法。

安全區域留白

另一個因素是裝置的安全區域。現在很多手機有圓角、瀏海，底部還有 home indicator。內容放得太靠邊，不是被切掉，就是很難點。

CSS 環境變數 env(safe-area-inset-top)、env(safe-area-inset-bottom)，以及左右對應的變數，可以讓版面預留這些區域的空間。依照這些數值加上 padding，重要按鈕就能留在真正可用的範圍內。

對賽程頁面來說，最需要留意的就是固定在頂端的標題列、底部導覽列，以及任何用來切換到隔天或下一頁的按鈕。

賽程頁面的實用檢查清單

• 網址列展開和收起兩種狀態都要測，不要只在桌機模擬器裡看。
• 檢查長表格的第一列和最後一列，確認都搆得到。
• 確認視窗縮小時，固定元素不會壓到列表內容。
• 確認靠近底部的點擊目標仍然完整可見、可以點。
• 檢查字級和行高，讓密密麻麻的賽程列不用放大也看得清楚。

為什麼這對撲克玩家很重要

賽程表是有時效性的。玩家在牌局之間用手機查看賽程時，需要快速找到開賽時間、買入金額或延遲報名截止時間。如果網址列遮住了相關的列或導覽控制項，這個頁面就無法發揮它最主要的功能。

好的行動版設計不需要另做一份賽程表，而是需要能回應實際視窗大小、尊重安全區域，並讓最重要的資訊隨時保持可見的版面配置。用實機測試仍然是在玩家發現問題之前，搶先抓到這些毛病最可靠的方法。