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 提出这样的功能，但请记住这样的媒体功能对于供应商来说是否容易实现是另一回事。