CSS 是否连接物理键盘的媒体查询
CSS media query for whether a physical keyboard is attached
假设我有一个带有键盘快捷键的站点,我想在其中将所述键盘快捷键可视化显示为它们所应用的任何元素的一部分。
在触摸界面上,尤其是 phone,我不想打扰,因为:
- 没有人会以这种方式使用软键盘,即使他们可以
- 键盘快捷键的视觉显示占用了宝贵的空间
- 在无键盘环境中显示键盘快捷键可能会令人困惑,或者至少不雅
但是,媒体查询文档似乎没有提及任何相关内容。
都2016年了,这还不行吗?
媒体查询 4 不提供任何媒体功能来确定是否连接了物理键盘。没有什么能阻止您在 www 风格的邮件列表上为 MQ4 或 MQ5 提出这样的功能,但请记住,这样的媒体功能是否容易让供应商实施是另一回事。
不幸的是,媒体查询 4 中没有查询来识别键盘的存在。
尽管还有其他新查询可能会有所帮助。
在我自己的应用程序中,我假设在有鼠标或触摸板作为主要输入时存在键盘。您可以使用
查询
@media (hover: hover) and (pointer: fine) { ... }
此查询将 false
用于带有触摸屏的设备、手写笔设备以及相机输入等特殊设备。
请注意,通过此查询,您查询的是主要输入设备。您可以查询所有输入设备
any-hover
和 any-pointer
.
另请注意,截至目前,MQ4 的采用率占所有浏览器的 81%,但没有 Firefox:https://caniuse.com/#feat=css-media-interaction
假设我有一个带有键盘快捷键的站点,我想在其中将所述键盘快捷键可视化显示为它们所应用的任何元素的一部分。
在触摸界面上,尤其是 phone,我不想打扰,因为:
- 没有人会以这种方式使用软键盘,即使他们可以
- 键盘快捷键的视觉显示占用了宝贵的空间
- 在无键盘环境中显示键盘快捷键可能会令人困惑,或者至少不雅
但是,媒体查询文档似乎没有提及任何相关内容。
都2016年了,这还不行吗?
媒体查询 4 不提供任何媒体功能来确定是否连接了物理键盘。没有什么能阻止您在 www 风格的邮件列表上为 MQ4 或 MQ5 提出这样的功能,但请记住,这样的媒体功能是否容易让供应商实施是另一回事。
不幸的是,媒体查询 4 中没有查询来识别键盘的存在。 尽管还有其他新查询可能会有所帮助。
在我自己的应用程序中,我假设在有鼠标或触摸板作为主要输入时存在键盘。您可以使用
查询@media (hover: hover) and (pointer: fine) { ... }
此查询将 false
用于带有触摸屏的设备、手写笔设备以及相机输入等特殊设备。
请注意,通过此查询,您查询的是主要输入设备。您可以查询所有输入设备
any-hover
和 any-pointer
.
另请注意,截至目前,MQ4 的采用率占所有浏览器的 81%,但没有 Firefox:https://caniuse.com/#feat=css-media-interaction