本文是對2015年Dev.opera作品的大大擴展更新，闡明了有關媒體查詢級別4相互作用媒體功能的誤解（ pointer ， hover ， any-pointer ， any-hover ）。原始文章誤解了any-hover: none ；該版本與最新的工作草案保持一致，解決了瀏覽器實現(xiàn)之間的不一致之處（請參閱當前的測試結(jié)果和相關的錯誤報告）。

媒體查詢4級旨在根據(jù)用戶輸入設備調(diào)整網(wǎng)站樣式和功能（通過window.matchMedia的CSS Interactivity或JavaScript行為）。雖然通常得到很好的支持，但實施變化持續(xù)存在。

常見用例涉及根據(jù)觸摸屏與鼠標/手寫筆的使用調(diào)整控制大小，或者有條件地啟用基於懸停的菜單：

 <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>

開發(fā)人員經(jīng)常利用這些功能進行觸摸檢測，通常在檢測pointer: coarse時聆聽觸摸事件：

 if（window.matchmedia && window.matchmedia（“（指針：cooly）”）。匹配）{
 / *粗指針：聽觸摸事件 */
 target.AddeventListener（“ TouchStart”，...）;
} 別的 {
 / *否則，使用鼠標/鍵盤事件 */
}

但是，這種方法是簡單的，並且誤解了功能的目的。

主要輸入限制

pointer和hover僅揭示主要指針輸入的特徵。這可能與用戶的實際主要輸入有所不同，尤其是在設備/輸入線模糊的情況下。至關重要的是，這些功能無法檢測到僅鍵盤的用戶。因此，無論查詢結(jié)果如何，請確保鍵盤可訪問性。

帶有藍牙鼠標的手機可能會報告pointer: coarse和hover: none 。相反，表面平板電腦可能主要使用觸控板（ pointer: fine ），但是用戶可能更喜歡觸摸屏。

any-pointer和any-hover都可以解決此問題。

評估所有投入

any-pointer和any-hover反映了所有指針輸入的組合功能。如果輸入具有不同的特徵，則多個值可以匹配。當前的實施通常的行為如下：

為了改善原始用例，對所有指針輸入的基本決策：“如果任何輸入很粗糙，放大控件”和“如果至少一個輸入支持懸停的話，則啟用Hover Menus?！?/p>

 <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僅當沒有任何輸入支持懸停的情況下，就不是正確的，從而使其在很大程度上冗餘。

結(jié)合細微差別的查詢

結(jié)合查詢以進行精緻評估：

 <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>

響應環(huán)境變化，瀏覽器會動態(tài)重新評估查詢（例如，添加藍牙鼠標）。

可能需要腳本

交互媒體功能並未表示當前使用的輸入。類似於輸入的工具？跟蹤JavaScript事件，但這僅在互動開始後提供信息，並且由於偽造的事件（輔助技術(shù)，iOS完整鍵盤支持）可能不準確。

避免經(jīng)歷破裂

基於事件的觸摸檢測（ pointer: coarse - >聽觸摸事件）是有缺陷的。它可以防止在觸摸設備上使用非電視屏幕屏幕輸入，並在主要由鼠標驅(qū)動的設備上使用觸摸屏輸入。相反，請務必收聽鼠標/鍵盤事件，並僅在any-pointer: coarse為TRUE時才添加觸摸事件偵聽器：

 / *始終收聽鼠標/鍵盤事件 */
target.AddeventListener（“ click”，...）;

if（window.matchmedia && window.matchmedia（“（任何點：croun）”）。匹配）{
 / *如果存在粗線，也請聽觸摸事件 */
 target.AddeventListener（“ TouchStart”，...）;
}

或者，使用指針事件進行統(tǒng)一輸入處理。

明確的用戶選擇

提供一個可供用戶選擇的模式（觸摸/鼠標），以避免輸入檢測陷阱。使用媒體查詢通知默認設置，並檢測觸摸輸入以提示模式開關。

負責的查詢

了解交互媒體功能的局限性。不要假設單個輸入類型，只依靠pointer和hover ，或忽略鍵盤可訪問性。取而代之的是，優(yōu)先考慮觸摸友好性，提供用戶選擇，並始終確保鍵盤可訪問性。

以上是交互媒體特徵及其潛力（對於錯誤的假設）的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！