检测浏览器是不是在网页中有键盘/箭头键

Posted 2023-05-06

【中文标题】检测浏览器是不是在网页中有键盘/箭头键

【英文标题】：Detect whether browser has keyboard/arrow keys in web page检测浏览器是否在网页中有键盘/箭头键

【发布时间】：2011-06-09 10:00:46

【问题描述】：

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

我可以使用什么启发式方法来决定是否需要它们——也就是说，用户输入箭头键事件是否不可能或不方便——除了识别特定的用户代理（其中是直截了当的，但不是面向未来的）？

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

【问题讨论】：

最好的选择是检测是否有鼠标。然而，检测真实的鼠标事件而不是模拟的事件是一件痛苦的事情。我解决了这个问题，请参阅：***.com/a/15415643/342275.

【参考方案1】：

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

有一个显示“按下继续”的标题屏幕。 点击或按键时，隐藏触控并开始游戏。 触摸时，显示触摸控件并开始游戏。

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

【讨论】：

这非常违反直觉，我强烈建议实施它。

好主意。缺点是它需要一个启动屏幕，但它在检测用户想要使用什么方面应该是高度可靠的。我现在没有时间尝试（赏金期选择错误），所以我稍后会回来接受。

我猜你甚至不需要一个完整的 Flash 屏幕——你可以像一些 Flash 游戏那样将你的加载屏幕变成一个“播放”图标，然后看看他们按下播放按钮的内容。

【参考方案2】：

在 Modernizr 中使用特征检测：http://www.modernizr.com/docs/#touch

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

【参考方案3】：

与其尝试猜测，不如将其设置为供用户选择的配置选项。

【参考方案4】：

如果您只有箭头（左/右/上/下），您是否可以考虑在游戏区域内添加触摸事件？这显然不会占用空间，因为它分层在游戏之上，所以它可以“永远在线”。

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

另一方面，触摸设备用户可以更轻松地使用“区域”（例如顶部中部、左侧中部、底部中部和右侧中部），因为……嗯……触摸而不是使用一个鼠标。

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

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

【讨论】：

感谢您的建议！除了方向之外，没有其他控件。

【参考方案5】：

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

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

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

【讨论】：

我认为这是对这个问题的正确答案——即使@AshleysBrain 的建议是最简单可靠的 imo。根据www.alastairc.acongesturestart实现触摸检测是优选的。我会将页面上的检查代码简化为：var e = document.createElement('div');return('ongesturestart' in e); 但我怀疑这是否是未来的证明。目前我能想到的最强大的变体是测试普通触摸事件（'ontouchstart'）和最大宽度/高度的媒体查询的组合

【参考方案6】：

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

让屏幕键盘能够调整大小也是谨慎的做法。

编辑回答问题：

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

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

【讨论】：

我同意，我打算在第一次运行时建议没有键盘，但有一个简单/明显的切换选项可供用户使用。

请注意，我的问题是“...应该默认显示”。我当然会为控件提供一个切换开关。我在问切换的初始状态应该是什么。

【参考方案7】：

您可以考虑检查显示尺寸。如果显示尺寸小于某个尺寸，您可以假设它是移动设备并且可以显示箭头按钮。其他明智的使用键盘按钮。

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

【参考方案8】：

您可以使用 javascript 来找出 windows 视口的高度，然后我们一个 if 语句说：

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

编辑：$(window).height() <= "960"结尾处的Left out )

【讨论】：

您投反对票以及这不是解决方案的原因是用户可能有旧显示器或浏览器尺寸小于 960 像素。他们将无法导航，因为他们没有触摸功能，而且您禁用了他们的箭头键功能。