触控优先 —— 海贼王h小游戏的热区与手势取舍

热区先定下来

所有主操作按钮的最小高度与最小宽度都是 46 像素，内边距单独给够，不靠文字把高度撑起来——文字短的按钮（「北」「东」）也必须和长按钮一样高。海图网格的格子是例外：它靠 aspect-ratio: 1 撑成正方形，十列排在 390px 里每格约 34 像素，低于 46。这是有意的让步，因为网格必须一屏看全，所以同时给了四个方向按钮作为等效操作。

间距也算热区的一部分。相邻按钮之间留 8 像素，避免拇指落在两个按钮的交界上。

不用的手势

不用拖拽。货舱配平最早的版本是把货箱拖进两舷，在手机上立刻和页面纵向滚动抢手势：手指往下一滑，到底是拖货箱还是翻页？改成「左舷／右舷／卸下」三个按钮之后，操作次数反而更少，键盘用户也能用 Tab 加回车玩完整局。

不用长按。长按在移动端浏览器里会触发系统的文本选择或上下文菜单，想压住它要调 user-select 与 touch-action，而且不同系统表现不一致。需要「持续」的只有罗盘定向，它换成了单击定位加一个暂停按钮。

不用双指与滑动方向判定。整站只用单击，外加浏览器原生的滚动。这让每个操作都能被键盘、读屏与自动化测试同等地触发。

窄屏导航：折行，不横滑

栏目导航五项，在 390px 下用 flex-wrap 折成两行全部可见。横滑方案看起来更紧凑，但它有两个真实问题：一是容器内滚动不改变文档宽度，自动化检查查不出「末项点不到」；二是右边缘常把栏目名切在字的中间，看上去像渲染坏了，而不是「还有，可以滑」。

折行不需要任何可滑动提示，也就不需要为提示再写一段渐隐与媒体查询。栏目少于七八项时，折行几乎总是更稳的选择。

首屏放什么

游戏页的首屏是舞台本身加主控按钮，玩法说明在下面。玩的人进来就能点，想读规则的人往下翻一屏。桌面宽度下读数栏移到右侧成为两列，手机上它落在舞台下方——读数在玩的时候要看，但它不该在手机上把游戏挤出首屏。

文章页的首屏是标题加导语，目录在 1040px 以上才移到右侧并吸顶；窄屏下目录就是正文顶部的一组锚点链接，不占满一屏。桌面侧边索引压在标题上方是移动端最常见的浪费。