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

Question

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

csskeyboardmedia-queries

6

假设我有一个带有键盘快捷键的网站，并且我想将这些键盘快捷键作为它们适用于的任何元素的一部分进行可视化显示。

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

1. 即使他们能够这样做，也没有人会以这种方式使用软键盘 2. 键盘快捷键的可视化显示占用了宝贵的空间 3. 在没有键盘的情况下显示键盘快捷键可能会令人困惑，或者至少是不优雅的

然而，媒体查询文档似乎没有提到这一点。

现在是2016年，这仍然不可能吗？

- Kev

3

为什么不只针对“台式机”呢？可以合理地假设只有使用台式机/笔记本电脑的用户才有物理键盘。 - Aziz

@Paulie_D 嗯，确实有像“手持设备”、“盲文”、“电视”等媒体类型，听起来就像是设备名称，不是吗？ - Mr Lister

@Paulie_D: "media" 实际上是指设备作为一个整体。请参阅HTML401，CSS21。而且，Media Queries 4针对某些输入方法具有媒体特性。 - BoltClock

1

@Kev，这是我目前为止所做的：https://jsfiddle.net/azizn/mras62ud/3/ 它并不理想，并需要大量的研究。我开始认为只使用CSS媒体查询来定位桌面可能是不可能的，因为平板电脑和视网膜显示屏越来越普及。另一个问题是像Asus Transform Book这样的设备，它是一台带有可拆卸键盘的平板电脑/笔记本电脑。你可以尝试使用JavaScript来检测显示器是否支持触摸屏，也许会更好一些。 - Aziz

1

@Kev：“我猜甚至手机也可能有它们” [没错。]（https://www.youtube.com/watch?v=-oi1B9fjVs4）（而且你甚至不需要使用Continuum就可以在Windows 10手机上直接使用蓝牙外设，可以直接在手机屏幕上使用。）你链接的文章幸好不再适用于Windows 10手机上的Microsoft Edge - 它在响应式设计方面的行为与其他移动浏览器相同。 - BoltClock

显示剩余5条评论

2个回答

3

Media Queries 4没有提供任何媒体特性来确定物理键盘是否连接。但你可以在www-style邮件列表中提出这样的特性，不过要记住，这样的媒体特性是否易于供应商实现又是另外一回事。

- BoltClock

请原谅我的无知，但是什么会使它难以实现？ - Kev

1

@Kev：只有熟悉浏览器引擎的人才能回答这个问题。我的观点是，不能保证这个功能会成为优先考虑的事项，甚至不一定会被实现。 - BoltClock

3

将此建议发布到CSSWG：https://github.com/w3c/csswg-drafts/issues/3871 - brianskold

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dominik · Accepted Answer

很遗憾，Media Queries 4 中没有查询键盘存在的方法。但是还有其他新的查询可能会有所帮助。

在我的应用程序中，当鼠标或触摸板作为主要输入时，我假设键盘存在。您可以使用以下查询进行查询：

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

对于具有触摸屏、笔记本电脑和相机等特殊设备，此查询将返回 false。

请注意，此查询查询的是主要输入设备。您可以使用 any-hover 和 any-pointer 查询所有输入设备。

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