it-swarm.com.de

Website für Touch-Geräte optimieren

Auf einem Touch-Gerät wie iPhone/iPad/Android kann es schwierig sein, eine kleine Taste mit dem Finger zu drücken. Es gibt keine browserübergreifende Möglichkeit, Touch-Geräte mit bekannten CSS-Medienabfragen zu erkennen. Also überprüfe ich, ob der Browser JavaScript Touch-Ereignisse unterstützt. Bisher haben sie andere Browser nicht unterstützt, aber der neueste Google Chrome auf Dev Channel aktivierte Touch-Ereignisse (auch für Nicht-Touch-Geräte). Und ich vermute andere Browserhersteller werden folgen, da Laptops mit Touchscreens auf dem Vormarsch sind. Update: Es war ein Fehler in Chrome, daher funktioniert jetzt die JavaScript-Erkennung wieder .

Dies ist der Test, den ich benutze:

function isTouchDevice() {
    return "ontouchstart" in window;
}

Das Problem ist, dass hiermit nur geprüft wird, ob der Browser Berührungsereignisse unterstützt, nicht das Gerät.

Kennt jemand die richtige Methode, um Touch-Geräten ein besseres Benutzererlebnis zu bieten? Anders als User Agent schnüffeln.

Mozilla hat eine Medienabfrage für Touch-Geräte. Aber ich habe so etwas in keinem anderen Browser gesehen: https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Update: Ich möchte die Verwendung einer separaten Seite/Site für Mobilgeräte/Touch-Geräte vermeiden. Die Lösung muss Touch-Geräte mit Objekterkennung oder ähnlichem aus JavaScript erkennen oder ein benutzerdefiniertes Touch-CSS einbinden, ohne dass Benutzeragenten daran riechen müssen! Der Hauptgrund, den ich gefragt habe, war sicherzustellen, dass es heute nicht möglich ist, bevor ich mich an die css3-Arbeitsgruppe wende . Also bitte nicht antworten, wenn du den Anforderungen in der Frage nicht folgen kannst;)

66
gregers

Für mich klingt es so, als ob Sie eine touchscreen-freundliche Option haben möchten, um die folgenden Szenarien abzudecken:

  1. iPhone-ähnliche Geräte: Kleiner Bildschirm, nur berühren
  2. Kleine Bildschirme, keine Berührung (du hast diesen nicht erwähnt)
  3. Große Bildschirme ohne Berührung (d. H. Herkömmliche Computer)
  4. Touchscreen-fähige Großbildschirme wie iPad, Notebooks/PCs mit Touchscreen.

Für die Fälle 1 und 2 benötigen Sie wahrscheinlich eine separate Site oder eine CSS-Datei, die viele unnötige Inhalte beseitigt und die Dinge größer und leichter lesbar/navigierbar macht. Wenn Sie sich für Fall 2 interessieren, sind Fall 1 und 2 gleichwertig, solange die Links/Schaltflächen auf der Seite über die Tastatur navigierbar sind.

Für Fall 3 haben Sie Ihre normale Website. Für Fall 4 klingt es so, als ob Sie möchten, dass anklickbare Dinge größer sind oder leichter zu berühren sind. Wenn es nicht möglich ist, einfach alles für alle Benutzer zu vergrößern, können Sie über ein alternatives Stylesheet die berührungsfreundlichen Layoutänderungen vornehmen.

Am einfachsten ist es, irgendwo auf der Seite einen Link zur Touchscreen-Version der Site bereitzustellen. Bei bekannten Touch-Geräten wie dem iPad können Sie den Benutzeragenten abrufen und das Touch-Stylesheet als Standard festlegen. Ich würde jedoch in Betracht ziehen, dies zum Standard für alle zu machen. Wenn Ihr Design auf dem iPad gut aussieht, sollte es auf jedem Notebook annehmbar gut aussehen. Ihre Mausbenutzer mit weniger als hervorragenden Klickfähigkeiten werden gerne größere Klickziele finden, insbesondere wenn Sie geeignete :hover - oder mouseover - Effekte hinzufügen, um Benutzer darauf hinzuweisen, dass Dinge anklickbar sind.

Ich weiß, dass Sie gesagt haben, Sie wollen keine Benutzeragenten beschnuppern. Aber ich würde behaupten, dass der Stand der Browser-Unterstützung zu diesem Zeitpunkt zu stark schwankt, um sich Gedanken über die "richtige" Vorgehensweise zu machen. Browser werden eventuell die Informationen bereitstellen, die Sie benötigen, aber Sie werden wahrscheinlich feststellen, dass es Jahre dauern wird, bis diese Informationen allgegenwärtig sind.

Gute Nachrichten! Der Redaktionsentwurf von CSS4 Media Queries enthält eine neue Medienfunktion ' pointer '.

Typische Beispiele für ein Feinzeigesystem sind eine Maus, ein Trackpad oder ein Touchscreen mit Stift. Fingerbasierte Touchscreens würden als "grob" eingestuft.

/* Make radio buttons and check boxes larger if we
   have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

Es ist auch möglich, die Medienabfrage mit JavaScript zu testen:

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

Aktualisiert am 11. Februar. 2013 Unter Windows 8 erkennen die neuesten Versionen von Chrome (Version 24+) Touch-Hardware beim Starten der Anwendung und legen Touch-Ereignisse offen. Leider ist "Zeiger: Grob" "Gibt false zurück. Es gibt keine Möglichkeit, herauszufinden, ob Zeigermedienabfragen nicht implementiert sind oder ob es einen feinen Zeiger gibt. WebKit nicht implementiert " pointer: fine ", also können wir ' t überprüfen Sie das auch nicht.

Update 26. September. 2012 Getestet in Safari auf iOS6 und Chrome auf Android 4.1.1 und es ist noch nicht da. 'Zeiger' und 'Hover'-Medienabfragen in WebKit gelandet 30. Mai. Laut User-Agent verwendet Safari den WebKit-Zweig 536.26 vom 25. April und Chrome on Android verwendet und noch älter (535.19). Nicht sicher, ob WebKit-Verzweigungen von User-Agent-Zeichenfolgen vertrauenswürdig sind, aber meine Testseite ist es nicht Zeigermedienabfragen können ebenfalls erkannt werden. Die Implementierung ab Mai implementiert nur die Zeigermedienabfrage für Touch-Geräte, sodass pointer: fine für Geräte mit einer Maus nicht funktioniert.

14
gregers

Ich weiß nicht, ob eine standardisierte Medienabfrage wie die von Mozilla das Problem von selbst lösen wird. Wie einer der Chromium-Entwickler in der von Ihnen verlinkten Diskussion sagte, kann oder wird die Unterstützung von Berührungsereignissen im Browser nicht bedeuten, dass Berührungsereignisse ausgelöst werden. Selbst wenn dies der Fall ist, möchte der Benutzer nur über Berührungseingaben interagieren . Ebenso bedeutet das Vorhandensein von Unterstützung für Berührungseingaben im Gerät nicht, dass der Benutzer diese Eingabemethode verwendet. Möglicherweise unterstützt das Gerät Maus-, Tastatur- und Berührungseingaben, und der Benutzer bevorzugt die Maus oder eine Kombination der drei Eingabetypen.

Ich stimme dem Chromium-Entwickler zu, dass die Unterstützung von Touch-Ereignissen kein Fehler im Browser war. Ein guter Browser sollte Touch-Ereignisse unterstützen, da er möglicherweise auf einem Gerät installiert ist, das Touch-Eingaben unterstützt. Es ist die Schuld des Website-Entwicklers, dass er die Ereignisunterstützung in Anspruch nahm, um zu bedeuten, dass der Benutzer über eine Berührung interagieren würde.

Es scheint, dass wir zwei Dinge wissen müssen: (1) Was sind alle unterstützten Eingabetypen auf dem Gerät? (2) Was sind alle unterstützten Ereignistypen im Browser?

Da wir momentan noch nicht die Nummer 1 kennen, gibt es einen Ansatz von PPK für den Quirksmode, den ich mag. Er spricht hier darüber: http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

Grundsätzlich sollten Sie auf Berührungs- und Mausereignisse achten und die Benutzeroberfläche entsprechend einrichten. Das beschränkt sich natürlich auf den Entwickler. Ich denke nicht, dass dies ein gültiger Ansatz für Ihr Problem mit der Linkgröße ist, da Sie nicht auf eine Interaktion warten möchten, um die Benutzeroberfläche zu ändern. Es geht darum, eine andere Benutzeroberfläche (einen größeren/kleineren Link) bereitzustellen, bevor eine Interaktion stattfindet.

Ich hoffe, Sie machen Ihren Vorschlag und er wird in CSS3 aufgenommen. Bis dahin scheint User Agent Sniffing, so sehr es mich auch schmerzt, der beste Ansatz zu sein.

p.s. Ich hoffe, ich hoffe, jemand kommt hierher und beweist mir das Gegenteil

3
Michael Hixson

Google Chrome hat einen Befehlszeilenschalter zum Aktivieren von BerührungsereignissenStandardmäßig deaktiviert. So lange, bis sie sie wieder für alle aktivieren (hoffentlich nicht), ist es möglich, Berührungen mit Hilfe von Javascript zu erkennen, wie ich es in der Frage beschrieben habe..

Update 3. Juni 2010 Dies ist am 25. Mai 2010 in die stabile Version gekommen :( Weiß nicht, ob es ein Fehler war oder nicht.

Habe das Problem auf der W3C-Mailingliste besprochen, aber ich bezweifle, dass bald etwas passieren wird. http://lists.w3.org/Archives/Public/www-style/2010May/0411.html Möglicherweise diskutieren sie dies während des TPAC im November.

Update 30. September 2010 : Angeblich behoben in Chrome) 6. Hatte noch keine Zeit, ein Downgrade auf stabil durchzuführen, um dies zu verifizieren Seit dem Chrome automatisch upgraden sollte dieses Problem schon weg sein :)

Lesen Sie diese Informationen, wenn Sie Medienabfragen verwenden möchten: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ und http : //www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

Update 16. Mai 2011 : W3C arbeitet jetzt an einer Touch Events Spezifikation , aber mehr oder weniger abgelehnt Berührungsereignisse für Terminals ohne Berührungshardware ausblenden. Erwarten Sie also nicht, dass die Erkennung von Berührungsereignissen lange funktioniert.

Update 6. Juni 2012 : Die W3C CSS4 Media Queries (Editors Draft) Spezifikation hat etwas sehr Interessantes. Siehe mein separate Antwort dazu.

3
gregers

Nein, so etwas gibt es nicht. CSS bietet die Option für die Bildschirmgröße, mit der Sie das Layout optimieren können, aber das ist alles. Es gibt auch media="handheld" das gilt aber auch nicht für ihre anforderungen.

Die Feature-Erkennung funktioniert möglicherweise mit JavaScript. Es gibt jedoch Probleme mit verschiedenen Ereignissen für verschiedene Geräte. PPK (der Mann hinter quirksmode.org) macht eine Menge Arbeit, um zu überprüfen, welches Javascript für jedes mobile/handgehaltene Gerät möglich ist, und es beweist, dass bei diesen Geräten nichts Standard zu sein scheint, und dennoch trifft dies auf Ihr Gerät nicht zu Voraussetzung für Touch-Laptop-Geräte.
(Ehrlich gesagt, ich weiß nicht, warum Sie sich Sorgen um ein Gerät machen, das noch nicht einmal auf dem Markt ist. Seien Sie pragmatisch und sorgen Sie sich darum, sobald es verfügbar ist und Sie es testen können.)

Durch die Arbeit von PPK mit mobilen Browsern und Touch-Ereignissen sparen Sie Stunden. Probieren Sie es aus hier

2
Dave Gregory

versuchen Sie es mit Tabellen und machen Sie eine volle Zelle, um ein Link zu sein. Ich arbeite daran auf meiner Website. Bisher funktioniert es nicht gut. Aber vielleicht finden Sie einen Weg. Auf diese Weise, nein Sie müssen Ihre Website mit Javascript und Funktionserkennung überlasten. Sie können eine relative Größe für eine festgelegte Größe festlegen. Auf diese Weise kann Ihre Website auf einem Desktop wie auf einem iPhone angezeigt werden. Denken Sie über diese Idee nach ... jeder Vorschlag wird geschätzt ...

0
Ismael Miguel
0
Divya Manian

Dies ist keine vollständige Lösung, aber Sie möchten möglicherweise kleine Schaltflächen ganz vermeiden. Während kleine Tasten auf Touch-Geräten eher ein Problem für die Benutzerfreundlichkeit darstellen, sind sie selbst mit einem großen Bildschirm und einer großen Maus immer schwer zu bedienen.

Wenn Sie nur auf die Verwendung von entsprechend großen Tasten achten, zwischen denen genügend Platz ist, profitieren alle davon. Außerdem werden Sie dadurch gezwungen, Ihre Benutzeroberfläche nicht mit zu vielen kleinen Tasten zu überladen :-).

0
sleske

In http://crbug.com/136119 finden Sie Informationen zum Hinzufügen von Zeigern: in Chrome in Ordnung. Es ist tatsächlich möglich zu erkennen, ob Pointer: Coarse unterstützt wird (um nicht gesetzte von nicht unterstützten zu unterscheiden). Erstellen Sie einfach die Medienabfrage selbst und testen Sie in Javascript, ob sie ordnungsgemäß analysiert wurde.

ZB heute "@media (Zeiger: grob)" in Chrome zeigt:

> document.styleSheets[0].rules[5].media[0]
"(pointer: coarse)"

Nicht unterstützte falsche Werte wie "@media (pointer: other)" tun dies jedoch nicht:

> document.styleSheets[0].rules[8].media[0]
"not all"
0
Rick Byers