相互作用メディアの機能とその可能性（誤った仮定のため）

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

メディアクエリレベル4は、ユーザー入力デバイスに基づいて、Webサイトのスタイリングと機能（ window.matchMediaを介した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（ "（pointer：coarse）"）。一致）{
 / *粗いポインター：タッチイベントを聞く */
 Target.AddeventListener（ "Touchstart"、...）;
} それ以外 {
 / *それ以外の場合は、マウス/キーボードイベントを使用します */
}

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

主要な入力制限

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

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

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

すべての入力の評価

any-pointerとany-hoverすべてのポインター入力の組み合わせ機能を反映しています。入力に異なる特性がある場合、複数の値が一致する可能性があります。現在、現在の実装は次のように動作します。

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

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

ブラウザは、環境の変化に応じてクエリを動的に再評価します（たとえば、Bluetoothマウスの追加）。

スクリプトが必要になる場合があります

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

壊れた経験を避けます

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

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

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

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

明示的なユーザーの選択

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

責任あるクエリ

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

以上が相互作用メディアの機能とその可能性（誤った仮定のため）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。