Interaktionsmedienmerkmale und ihr Potenzial (für falsche Annahmen)

Dieser Artikel, ein wesentlich erweitertes Update eines 2015 Deva-Stücks, verdeutlicht falsche Vorstellungen im Zusammenhang mit Medienabfragen Level 4 Interaction Media-Funktionen ( pointer , hover , any-pointer , any-hover ). Der ursprüngliche Artikel hat any-hover: none ; Diese Version entspricht dem neuesten Arbeitsentwurf und befasst sich mit Inkonsistenzen über Browser -Implementierungen (siehe aktuelle Testergebnisse und verwandte Fehlerberichte).

Medienabfragen Level 4 zielt darauf ab, das Website -Styling und -funktionalität (CSS -Interaktivität oder JavaScript -Verhalten über window.matchMedia ) basierend auf Benutzereingabegeräten anzupassen. Obwohl im Allgemeinen gut unterstützt, bleiben die Implementierungsschwankungen bestehen.

Bei gemeinsamen Anwendungsfällen wird die Anpassung der Kontrollgrößen basierend auf Touchscreen im Vergleich zu Maus-/Stiftgebrauch oder zur konditionellen Aktivierung von schwebebasierten Menüs:

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

Entwickler nutzen diese Funktionen häufig für die Erkennung von Berührungen und hören normalerweise nach Berührungsereignissen, wenn pointer: coarse wird festgestellt:

 if (window.matchmedia && window.matchmedia ("(Zeiger: grob)"). Übereinstimmung) {
 / * Grobzeiger: Hören Sie sich an Touch -Ereignisse */
 target.addeventListener ("TouchStart", ...);
} anders {
 / * Ansonsten verwenden Sie Maus-/Tastaturereignisse */
}

Dieser Ansatz ist jedoch simpel und versteht den Zweck der Merkmale.

Primäre Eingangsbeschränkungen

pointer und hover zeigen nur die Eigenschaften des primären Zeigereingangs. Dies kann von der tatsächlichen primären Eingabe des Benutzers abweichen, insbesondere mit verschwommenem Gerät/Eingangsleitungen. Entscheidend ist, dass diese Funktionen keine Benutzer nur für Tastaturen erkennen. Stellen Sie daher unabhängig von Abfrageergebnissen die Tastatur -Zugänglichkeit sicher.

Ein Telefon mit einer Bluetooth -Maus kann pointer: coarse und hover: none , obwohl der Benutzer hauptsächlich die Maus verwendet. Umgekehrt kann ein Oberflächen -Tablet hauptsächlich das Trackpad ( pointer: fine ) verwenden, aber der Benutzer bevorzugt den Touchscreen.

Dieses Problem wird von any-pointer und any-hover angesprochen.

Bewertung aller Eingaben

any-pointer und any-hover spiegeln die kombinierten Funktionen aller Zeigereingänge wider. Mehrere Werte können übereinstimmen, wenn Eingaben unterschiedliche Eigenschaften aufweisen. Aktuelle Implementierungen verhalten sich im Allgemeinen wie folgt:

Um die ursprünglichen Anwendungsfälle zu verbessern, sind Grundentscheidungen für alle Zeigereingaben: "Wenn eine Eingabe grob ist, vergrößern Sie die Steuerelemente" und "Schwebemenüs aktivieren, wenn mindestens ein Eingang den Schwebedruck unterstützt".

 <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 ist nur dann wahr, wenn keine Zeigereingänge vorhanden sind. any-hover: none ist nur dann wahr, wenn keiner der Eingänge den Schweber unterstützt, was es weitgehend überflüssig macht.

Kombination von Anfragen zur Nuance

Kombinieren Sie Abfragen für raffinierte Bewertungen:

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

Browser bewerten dynamisch Abfragen als Reaktion auf Umweltveränderungen (z. B. Hinzufügen einer Bluetooth-Maus).

Scripting kann notwendig sein

Interaktionsmedienfunktionen geben den aktuell verwendeten Eingang nicht an. Tools wie welche Eingabe? Verfolgen Sie JavaScript -Ereignisse, aber dies liefert nur Informationen nach Beginn der Interaktion und kann aufgrund von gefälschten Ereignissen (Assistive Technologies, iOS -Volltastaturunterstützung) ungenau sein.

Vermeiden Sie gebrochene Erfahrungen

Ereignisbasierte Toucherkennung ( pointer: coarse -> Hören Sie sich Touch -Events an) ist fehlerhaft. Es verhindert die Verwendung von Nicht-Touchscreen-Eingängen auf Touch-Geräten und Touchscreen-Eingängen auf hauptsächlich mausgesteuerten Geräten. Hören Sie stattdessen immer auf Maus-/Tastaturereignisse an und fügen Sie Touch Event-Hörer nur dann hinzu, wenn any-pointer: coarse ist wahr:

 / * Hören Sie immer Maus/Tastaturereignisse *///
target.addeventListener ("klicken", ...);

if (window.matchmedia && window.matchmedia ("(Any-Zeiger: grob)"). Übereinstimmung) {
 / * Wenn ein grober Zeiger existiert, hören Sie auch nach Touch -Events */////
 target.addeventListener ("TouchStart", ...);
}

Verwenden Sie alternativ Zeigerereignisse für ein einheitliches Eingangsumschlag.

Explizite Benutzerauswahl

Geben Sie einen vom Benutzer ausgewählten Modus (Touch/Maus) an, um Fallstricke in Eingangserkennung zu vermeiden. Verwenden Sie Medienabfragen, um die Standardeinstellung zu informieren, und erkennen Sie die Berührungseingabe, um einen Modusschalter fordern.

Verantwortungsbewusste Abfrage

Verstehen Sie die Grenzen der Interaktionsmedienfunktionen. Nehmen Sie nicht einen einzelnen Eingangstyp an, verlassen Sie sich ausschließlich auf pointer und hover oder vernachlässigen Sie die Zugänglichkeit der Tastatur. Priorisieren Sie stattdessen Touchfriendess, bieten Sie die Auswahl der Benutzer und gewährleisten Sie immer die Tastatur-Zugänglichkeit.

Das obige ist der detaillierte Inhalt vonInteraktionsmedienmerkmale und ihr Potenzial (für falsche Annahmen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!