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

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

常見(jiàn)用例涉及根據(jù)觸摸屏與鼠標(biāo)/手寫(xiě)筆的使用調(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>

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

 if（window.matchmedia && window.matchmedia（“（指針：cooly）”）。匹配）{
 / *粗指針：聽(tīng)觸摸事件 */
 target.AddeventListener（“ TouchStart”，...）;
} 別的 {
 / *否則，使用鼠標(biāo)/鍵盤(pán)事件 */
}

但是，這種方法是簡(jiǎn)單的，并且誤解了功能的目的。

主要輸入限制

pointer和hover僅揭示主要指針輸入的特征。這可能與用戶(hù)的實(shí)際主要輸入有所不同，尤其是在設(shè)備/輸入線模糊的情況下。至關(guān)重要的是，這些功能無(wú)法檢測(cè)到僅鍵盤(pán)的用戶(hù)。因此，無(wú)論查詢(xún)結(jié)果如何，請(qǐng)確保鍵盤(pán)可訪問(wèn)性。

帶有藍(lán)牙鼠標(biāo)的手機(jī)可能會(huì)報(bào)告pointer: coarse和hover: none 。相反，表面平板電腦可能主要使用觸控板（ pointer: fine ），但是用戶(hù)可能更喜歡觸摸屏。

any-pointer和any-hover都可以解決此問(wèn)題。

評(píng)估所有投入

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

為了改善原始用例，對(duì)所有指針輸入的基本決策：“如果任何輸入很粗糙，放大控件”和“如果至少一個(gè)輸入支持懸停的話，則啟用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僅當(dāng)不存在指針輸入時(shí)，沒(méi)有一個(gè)是正確的。 any-hover: none僅當(dāng)沒(méi)有任何輸入支持懸停的情況下，就不是正確的，從而使其在很大程度上冗余。

結(jié)合細(xì)微差別的查詢(xún)

結(jié)合查詢(xún)以進(jìn)行精致評(píng)估：

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

響應(yīng)環(huán)境變化，瀏覽器會(huì)動(dòng)態(tài)重新評(píng)估查詢(xún)（例如，添加藍(lán)牙鼠標(biāo)）。

可能需要腳本

交互媒體功能并未表示當(dāng)前使用的輸入。類(lèi)似于輸入的工具？跟蹤JavaScript事件，但這僅在互動(dòng)開(kāi)始后提供信息，并且由于偽造的事件（輔助技術(shù)，iOS完整鍵盤(pán)支持）可能不準(zhǔn)確。

避免經(jīng)歷破裂

基于事件的觸摸檢測(cè)（ pointer: coarse - >聽(tīng)觸摸事件）是有缺陷的。它可以防止在觸摸設(shè)備上使用非電視屏幕屏幕輸入，并在主要由鼠標(biāo)驅(qū)動(dòng)的設(shè)備上使用觸摸屏輸入。相反，請(qǐng)務(wù)必收聽(tīng)鼠標(biāo)/鍵盤(pán)事件，并僅在any-pointer: coarse為T(mén)RUE時(shí)才添加觸摸事件偵聽(tīng)器：

 / *始終收聽(tīng)鼠標(biāo)/鍵盤(pán)事件 */
target.AddeventListener（“ click”，...）;

if（window.matchmedia && window.matchmedia（“（任何點(diǎn)：croun）”）。匹配）{
 / *如果存在粗線，也請(qǐng)聽(tīng)觸摸事件 */
 target.AddeventListener（“ TouchStart”，...）;
}

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

明確的用戶(hù)選擇

提供一個(gè)可供用戶(hù)選擇的模式（觸摸/鼠標(biāo)），以避免輸入檢測(cè)陷阱。使用媒體查詢(xún)通知默認(rèn)設(shè)置，并檢測(cè)觸摸輸入以提示模式開(kāi)關(guān)。

負(fù)責(zé)的查詢(xún)

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

以上是交互媒體特征及其潛力（對(duì)于錯(cuò)誤的假設(shè)）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！