CSS 媒体查询是否连接物理键盘

Question

假设我有一个带有键盘快捷键的网站，我想在其中直观地显示所述键盘快捷键，作为它们应用到的任何元素的一部分。

在触摸界面上，尤其是手机上，我不想打扰，因为：

1. 即使可以，也没有人会这样使用软键盘
2. 键盘快捷键的视觉显示占用了宝贵的空间
3. 在无键盘上下文中显示键盘快捷键可能会令人困惑，或者至少不优雅

但是，媒体查询文档似乎没有提及任何相关内容。

都2016年了，这还不可能吗？

Answer 1

不幸的是，媒体查询 4 中没有查询来识别键盘是否存在。 不过还有其他新的查询可能会有所帮助。

在我自己的应用程序中，我假设当有鼠标或触摸板作为主要输入时存在键盘。您可以通过

查询

@media (hover: hover) and (pointer: fine) { ... }

对于带有触摸屏的设备、手写笔设备以及摄像头输入等奇特设备，此查询将适用于

false

。

请注意，通过此查询，您正在查询主要输入设备。您可以查询所有输入设备

any-hover

和

any-pointer

。

另请注意，截至目前，MQ4 的采用率为所有浏览器的 81%，但 Firefox 除外：https://caniuse.com/#feat=css-media-interaction

Answer 2

媒体查询 4 不提供任何媒体功能来确定是否连接了物理键盘。没有什么可以阻止您在 www 风格的邮件列表中为 MQ4 或 MQ5 提出这样的功能，但请记住这样的媒体功能是否容易让供应商实现是另一回事。

Answer 3

如果您想测试键盘按键，如果您的键盘工作不正常，如果键盘有故障，或者您想尝试您的计算机键盘，那么这个免费的在线工具适合您。