移动端赛程页面显示不全怎么办

为什么手机浏览器会挡住内容

在手机上，浏览器的地址栏并不是固定不动的。用户一滑动，它就会收起或展开，可视区域的高度也跟着实时变化。所以，一个按固定像素高度设计的页面，顶部或底部随时可能被吃掉一块。

对扑克赛程页面来说，这是个很实际的问题。赛程就是一大堆赛事、买入、开赛时间和结构的密集列表。地址栏要是盖住了页头，玩家可能就看不到当天或系列赛的标签；要是盖住了页脚，可能就漏掉导航链接或者表格最后几行。

视口单位的坑

内容被挡住，一个常见原因就是用了视口高度单位。在 CSS 里，100vh 指的是视口高度，但在手机浏览器上，它往往指的是最大可能的视口，也就是地址栏收起时的那个高度。地址栏一露出来，实际可见区域就比 100vh 小。

结果就是，一个满屏高度的布局会伸到屏幕外面去。放在底部的元素，比如吸顶的筛选栏或者“下一页”按钮，可能就藏到浏览器界面下面了。

现代 CSS 提供了替代方案。动态视口单位 dvh 和小视口单位 svh 就是专门用来跟随视口变化的。把 height: 100vh 换成 min-height: 100dvh，是满屏布局的典型修法。

安全区域留白

另一个因素是设备的安全区域。很多手机有圆角、刘海，或者底部有个 home 指示条。内容贴边太近，就可能被裁掉，或者很难点到。

CSS 环境变量 env(safe-area-inset-top)、env(safe-area-inset-bottom) 以及左右对应的变量，可以让布局给这些区域留出空间。根据这些值加内边距，就能把重要控件留在可用范围内。

对赛程来说，最受影响的是吸顶页头、底部导航栏，以及任何跳到下一天或下一页的按钮。

赛程页的实用检查

• 地址栏展开和收起两种状态都要测，别只在桌面模拟器里看。
• 检查长赛事表格的第一行和最后一行，确认都能滚到。
• 确认视口缩小时，吸顶元素不会压住列表内容。
• 确认靠近底部边缘的点击目标仍然完整可见、可以点。
• 检查字号和行高，让密集的赛程行不用放大也能看清。

为什么这对扑克玩家很重要

锦标赛赛程对时间非常敏感。玩家在打牌的间隙用手机查看赛程时，需要快速找到开赛时间、买入级别或延迟报名截止时间。如果地址栏挡住了相关行或导航控件，页面就失去了它最主要的功能。

优秀的移动端设计并不需要单独做一份赛程。它需要的是能够响应真实视口、尊重安全区域、并始终把最重要的信息保持可见的布局。在真实设备上测试，仍然是赶在玩家之前发现这些问题的最可靠方法。