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!