我们的鼠标游戏放到手机上，根本动不了

2026年9月26日 · 阅读约 4 分钟

打开网页游戏的人，大多数用的是手机。这一点我们知道，可 Salt & Stone，一款在光秃秃的岩石小岛上建城、跨越内海做贸易的游戏，依然是为鼠标做的。镜头、放置建筑、选中建筑，全都挂在鼠标事件上。

在手机上，问题可不只是「有点难操作」：什么都动不了。 地图拖不动，什么都放不下，什么都选不中。经营类游戏不会提示你该怎么操作，所以一个连地图都挪不动的玩家，只会直接把它关掉。

一行代码，没有它别的都白搭

游戏现在改用了 pointer 事件，鼠标、触控笔和手指走同一条路径。可光是这样，在手机上什么都不会变，原因在浏览器。

默认情况下，浏览器会把单指拖动留给自己用来滚动页面，把双指拖动留给自己用来缩放页面。游戏的画布只会收到一条「手势已取消」的消息，别的什么都没有。解决办法是在画布上加一行 CSS，告诉浏览器这里的触摸归页面管： touch-action: none。它必须写在样式表里，不能事后再用脚本设置。

每一样都需要单独给出答案。把它们一对一映射到鼠标操作上是行不通的。

没有悬停。 用鼠标时，点击之前会有一个建筑「虚影」跟着指针走，显示这个位置能不能放。手指在触碰屏幕之前，根本不在任何位置上。所以选中建筑后，拖动虚影，抬起手指即放置：在确认之前，你能看到建筑本身，也能看到它放不放得下。这是在玻璃屏上最接近悬停的东西。

手指没法同时平移和瞄准。 鼠标可以分别移动指针和地图。手里拿着建筑时，单指瞄准，双指平移和缩放。手里什么都没拿时，单指移动地图，这也是大家第一下会去尝试的操作。

没有滚轮，也没有右键。 这两个原本分别用来旋转建筑和放下建筑。在触屏上，它们变成了两个 56 像素的按钮，只在你拿着东西时才出现，其余时间不占屏幕。

按钮也得变大。通常的做法是按屏幕宽度写媒体查询，而在这里，它把两种情况都弄反了：平板宽 1024 像素，需要手指大小的控件；而桌面上一个窄窄的浏览器窗口并不需要。

所以尺寸切换问的是主指针是不是粗略的（coarse），也就是手指，而不是窗口有多宽。在触屏设备上，底栏按钮从 28 像素变成 46 像素，建筑卡片从 56 像素变成 84 像素。

还有一条手机专属的规则：横过来拿时，手机屏幕很矮。如果屏幕高度不足 520 像素，建筑托盘就不会自动展开，因为它一打开就会盖住半个多屏幕，包括你正想在上面挑位置的那一片城镇。

Husktide 的问题不一样。它把自己画进一个固定的 16:9 框里，再把这个框缩放到适合屏幕的大小。手机竖着拿时，屏幕中间只剩一条带子，上下都是黑的：游戏只用了屏幕的 26%。

修复方法是在游戏启动之前，根据屏幕的形状来决定游戏画框的形状，同时保持像素总数不变，这样所有布局上的测量依然成立。现在在竖着的手机上，它用了 99.9%。

这又暴露出第二个问题。所有东西都是先用游戏自己的单位绘制，再缩小到合适的尺寸，所以一个 52 单位高的按钮，到了横着的手机上可能只有 27 个真实像素，太小了，没法稳定点中。现在每个点击目标的大小都由同一个数字决定，这个数字是根据实际缩放比例算出来的，所以在屏幕上始终不小于 44 像素。

「支持手机」没法留到最后再加。一套围绕悬停指针、滚轮和第二个按键设计的操作方案，得为手指重新设计，光重新映射是不够的。而第一项测试是最无聊的那一项：在手机上打开它，试着做玩家会做的第一件事。