この記事は、2015 dev.operaピースの更新を大幅に拡張したもので、メディアクエリレベル4の相互作用メディア機(jī)能（ pointer 、 hover 、 any-pointer 、 any-hover ）をめぐる誤解を明確にします。元の記事は、 any-hover: none ;このバージョンは、最新の作業(yè)ドラフトと一致し、ブラウザの実裝全體で矛盾に対処します（現(xiàn)在のテスト結(jié)果と関連するバグレポートを參照）。

メディアクエリレベル4は、ユーザー入力デバイスに基づいて、Webサイトのスタイリングと機(jī)能（ window.matchMediaを介したJavaScriptの動(dòng)作）を適応させることを目的としています。一般的には十分にサポートされていますが、実裝のバリエーションは持続します。

一般的なユースケースには、タッチスクリーンとマウス/スタイラスの使用に基づいてコントロールサイズを調(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>

開発者は、多くの場(chǎng)合、タッチ検出のためにこれらの機(jī)能を活用し、通常、 pointer: coarseが検出されたときにタッチイベントをリッスンします。

 if（window.matchmedia && window.matchmedia（ "（pointer：coarse）"）。一致）{
 / *粗いポインター：タッチイベントを聞く */
 Target.AddeventListener（ "Touchstart"、...）;
} それ以外 {
 / *それ以外の場(chǎng)合は、マウス/キーボードイベントを使用します */
}

ただし、このアプローチは単純化されており、機(jī)能の目的を誤解しています。

主要な入力制限

pointerとhover 、主要なポインター入力の特性のみを明らかにします。これは、特にぼやけたデバイス/入力ラインでは、ユーザーの実際のプライマリ入力とは異なる場(chǎng)合があります。重要なことに、これらの機(jī)能はキーボードのみのユーザーを検出しません。したがって、クエリの結(jié)果に関係なく、キーボードのアクセシビリティを確保します。

Bluetoothマウスを備えた攜帯電話は、 pointer: coarseとhover: none 、ユーザーが主にマウスを使用しているにもかかわらず。逆に、表面のタブレットは主にトラックパッド（ pointer: fine ）を使用する場(chǎng)合がありますが、ユーザーはタッチスクリーンを好む場(chǎng)合があります。

この問題はany-pointerとany-hoverによって対処されます。

すべての入力の評(píng)価

any-pointerとany-hoverすべてのポインター入力の組み合わせ機(jī)能を反映しています。入力に異なる特性がある場(chǎng)合、複數(shù)の値が一致する可能性があります?，F(xiàn)在、現(xiàn)在の実裝は次のように動(dòng)作します。

元のユースケースを改善するために、すべてのポインター入力の基本決定：「入力が粗い場(chǎng)合は、コントロールを拡大します」、および「少なくとも1つの入力がホバーをサポートする場(chǎng)合はホバーメニューを有効にします」。

 <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ポインター入力が存在しない場(chǎng)合にのみ、ありません。 any-hover: none入力がホバーをサポートしていない場(chǎng)合にのみ當(dāng)てはまるものはありません。

ニュアンスのクエリを組み合わせます

洗練された評(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>

ブラウザは、環(huán)境の変化に応じてクエリを動(dòng)的に再評(píng)価します（たとえば、Bluetoothマウスの追加）。

スクリプトが必要になる場(chǎng)合があります

インタラクションメディア機(jī)能は、現(xiàn)在使用されている入力を示していません。どのような入力が好きですか？ JavaScriptイベントを追跡しますが、これはインタラクションが開始された後にのみ情報(bào)を提供し、偽造イベント（支援技術(shù)、iOSフルキーボードサポート）のために不正確になる可能性があります。

壊れた経験を避けます

イベントベースのタッチ検出（ pointer: coarse - >タッチイベントを聞く）に欠陥があります。これは、主にマウス駆動(dòng)型デバイスでタッチデバイスとタッチスクリーン入力で非タッチスクリーン入力を使用することを防ぎます。代わりに、常にマウス/キーボードのイベントを聞いて、 any-pointer: coarseている場(chǎng)合にのみタッチイベントリスナーを追加します。

 / *常にマウス/キーボードイベントを聴く */
Target.AddeventListener（ "Click"、...）;

if（window.matchmedia && window.matchmedia（ "（any-pointer：coarse）"）。一致）{
 / *粗いポインターが存在する場(chǎng)合は、タッチイベントも聞いてください */
 Target.AddeventListener（ "Touchstart"、...）;
}

または、統(tǒng)一された入力処理にはポインターイベントを使用します。

明示的なユーザーの選択

入力検出の落とし穴を避けるために、ユーザー選択可能なモード（タッチ/マウス）を提供します。メディアクエリを使用してデフォルトの設(shè)定を通知し、タッチ入力を検出してモードスイッチをプロンプトします。

責(zé)任あるクエリ

インタラクションメディア機(jī)能の制限を理解します。単一の入力タイプを想定したり、 pointerとhoverに頼ったり、キーボードのアクセシビリティを無視したりしないでください。代わりに、タッチフレンドリーに優(yōu)先順位を付け、ユーザーの選択を提供し、常にキーボードのアクセシビリティを確保してください。

以上が相互作用メディアの機(jī)能とその可能性（誤った仮定のため）の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。