交互媒体特征及其潜力（对于错误的假设）

本文是对2015年Dev.opera作品的大大扩展更新，阐明了有关媒体查询级别4相互作用媒体功能的误解（ pointer ， hover ， any-pointer ， any-hover ）。原始文章误解了any-hover: none ；该版本与最新的工作草案保持一致，解决了浏览器实现之间的不一致之处（请参阅当前的测试结果和相关的错误报告）。

媒体查询4级旨在根据用户输入设备调整网站样式和功能（通过window.matchMedia的CSS Interactivity或JavaScript行为）。虽然通常得到很好的支持，但实施变化持续存在。

常见用例涉及根据触摸屏与鼠标/手写笔的使用调整控制大小，或者有条件地启用基于悬停的菜单：

 <code>@media (pointer: fine) { /* Mouse or stylus: small controls okay */ } @media (pointer: coarse) { /* Touchscreen: larger touch targets */ } @media (hover: hover) { /* Enable hover menus */ } @media (hover: none) { /* Disable hover menus */ }</code>

开发人员经常利用这些功能进行触摸检测，通常在检测pointer: coarse时聆听触摸事件：

 if（window.matchmedia && window.matchmedia（“（指针：cooly）”）。匹配）{
 / *粗指针：听触摸事件 */
 target.AddeventListener（“ TouchStart”，...）;
} 别的 {
 / *否则，使用鼠标/键盘事件 */
}

但是，这种方法是简单的，并且误解了功能的目的。

主要输入限制

pointer和hover仅揭示主要指针输入的特征。这可能与用户的实际主要输入有所不同，尤其是在设备/输入线模糊的情况下。至关重要的是，这些功能无法检测到仅键盘的用户。因此，无论查询结果如何，请确保键盘可访问性。

带有蓝牙鼠标的手机可能会报告pointer: coarse和hover: none 。相反，表面平板电脑可能主要使用触控板（ pointer: fine ），但是用户可能更喜欢触摸屏。

any-pointer和any-hover都可以解决此问题。

评估所有投入

any-pointer和any-hover反映了所有指针输入的组合功能。如果输入具有不同的特征，则多个值可以匹配。当前的实施通常的行为如下：

为了改善原始用例，对所有指针输入的基本决策：“如果任何输入很粗糙，放大控件”和“如果至少一个输入支持悬停的话，则启用Hover Menus。”

 <code>@media (any-pointer: coarse) { /* At least one coarse pointer: larger controls */ } @media (any-hover: hover) { /* At least one hover-capable input: enable hover menus */ }</code>

any-pointer: none仅当不存在指针输入时，没有一个是正确的。 any-hover: none仅当没有任何输入支持悬停的情况下，就不是正确的，从而使其在很大程度上冗余。

结合细微差别的查询

结合查询以进行精致评估：

 <code>@media (pointer: coarse) and (any-pointer: fine) { /* Primary input is touchscreen, but a fine input exists. Prioritize touch, but mouse/stylus users can still interact. */ } @media (pointer: fine) and (any-pointer: coarse) { /* Primary input is mouse/stylus, but a touchscreen exists. Larger controls might be safest. */ } @media (hover: none) and (any-hover: hover) { /* Primary input lacks hover, but another input supports it. Treat hover as optional. */ }</code>

响应环境变化，浏览器会动态重新评估查询（例如，添加蓝牙鼠标）。

可能需要脚本

交互媒体功能并未表示当前使用的输入。类似于输入的工具？跟踪JavaScript事件，但这仅在互动开始后提供信息，并且由于伪造的事件（辅助技术，iOS完整键盘支持）可能不准确。

避免经历破裂

基于事件的触摸检测（ pointer: coarse - >听触摸事件）是有缺陷的。它可以防止在触摸设备上使用非电视屏幕屏幕输入，并在主要由鼠标驱动的设备上使用触摸屏输入。相反，请务必收听鼠标/键盘事件，并仅在any-pointer: coarse为TRUE时才添加触摸事件侦听器：

 / *始终收听鼠标/键盘事件 */
target.AddeventListener（“ click”，...）;

if（window.matchmedia && window.matchmedia（“（任何点：croun）”）。匹配）{
 / *如果存在粗线，也请听触摸事件 */
 target.AddeventListener（“ TouchStart”，...）;
}

或者，使用指针事件进行统一输入处理。

明确的用户选择

提供一个可供用户选择的模式（触摸/鼠标），以避免输入检测陷阱。使用媒体查询通知默认设置，并检测触摸输入以提示模式开关。

负责的查询

了解交互媒体功能的局限性。不要假设单个输入类型，只依靠pointer和hover ，或忽略键盘可访问性。取而代之的是，优先考虑触摸友好性，提供用户选择，并始终确保键盘可访问性。

以上是交互媒体特征及其潜力（对于错误的假设）的详细内容。更多信息请关注PHP中文网其他相关文章！