检测浏览器网页中是否有键盘/方向键

Question

我有一个 HTML+JavaScript 的全屏游戏，它使用箭头键作为主要控件。这不能在无键盘的 Android 设备上使用（我没有在 iOS 上测试过），而且即使软键盘有方向键也会占用不必要的空间。因此，我添加了屏幕控制按钮。然而，这些按钮在桌面浏览器上是不必要的（而且大得离谱），所以我希望它们不会弹出，除非需要它们。

我可以使用哪些启发式方法来决定是否需要它们（即，用户是否不可能或难以输入箭头键事件）除了识别特定的用户代理（这很简单，但不是面向未来的）？

我当然会允许用户隐藏/显示按钮；我正在寻找有用的启发法来选择默认设置。

Answer 1

不需要任何用户代理嗅探、配置选项或任何类型的猜测。只需这样做：

1. 有一个标题屏幕，上面写着“按继续”。
2. 单击或按键时，隐藏触摸控件并开始游戏。
3. 触摸时，显示触摸控件并开始游戏。

您甚至不需要向用户提及该选项，并且您可以完美地自动检测他们的首选控件。

Answer 2

将特征检测与 Modernizr 结合使用：http://www.modernizr.com/docs/#touch

虽然这不是检查用户是否有键盘的可靠方法，但查看浏览器是否支持触摸绝对是可靠的方法。

Answer 3

不要尝试猜测，而是将其作为配置选项供用户选择。

Answer 4

如果您只有箭头（左/右/上/下），您可能会考虑在游戏字段中添加触摸事件？这显然不会占用空间，因为它位于游戏之上，因此它可以“永远在线”。

• 计算机用户甚至不知道它在那里，尽管我猜他/她可以用它们来用鼠标玩你的游戏。

• 另一方面，触摸设备用户可以更轻松地使用“区域”（例如中上、中左、中下和中右），因为……好吧……触摸而不是使用鼠标。

这可能需要一些解释，因为您可能不希望用户看到这些点，但这感觉像是一个有效的选项。

即使您有 4 个按钮和一个“火”，您也可以这样做，例如添加一个“中间”部分。

Answer 5

查找特定于触摸的事件，例如 touchstart 或gesturestart，并在检测到时显示屏幕控件。

http://developer.apple.com/ Library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

我不确定 system-info api 是否已由任何浏览器实现：
http://www.w3.org/TR/system-info-api/

Answer 6

添加一个按钮来切换屏幕键盘的显示，而不是默认显示屏幕键盘。

为屏幕键盘提供调整大小的功能也可能是谨慎的做法。

编辑回答问题：

如果您的大多数用户将使用计算机，则默认情况下键盘应隐藏；

如果您的大多数用户将使用移动设备，则默认情况下键盘应可见。

Answer 7

您可以考虑检查显示尺寸。如果显示尺寸小于特定尺寸，则可以假设它是移动设备并且可以显示箭头按钮。否则使用键盘按钮。

您还可以保留一个选项，以便用户可以根据需要手动设置。

Answer 8

您可以使用 javascript 找出 windows 视口的高度，然后使用 if 语句表示：

if ($(window).height() <= "960")) {
    //Your code to display keyboard controls
    //P.S. 960 is height of iPhone 4+ screen
}

Edit: Left out ) at end of $(window).height() <= "960"