Samstag, der 07. Dezember 2019 - 04:34 Uhr

Doppeltes tippen für Links unter iOS vermeiden

erstellt am: 01.07.2016 | von: DevLink | Kategorie(n): Tutorials | Keine Kommentare

Beim erstellen dieser Seite ist mir etwas essentielles aufgefallen.
Nachdem ich die Seite nach und nach für Mobilgeräte angepasst hatte und auf mehreren Geräten testen konnte, fiel mir auf, dass bei iOS Geräten auf Links doppelt "geklickt" werden muss um ans Ziel zu kommen.

Nach einiger Recherche fand ich dann entsprechende Beiträge die das Phänomen auch sehr gut beschrieben und gelöst haben.

Um dies zu umgehen, muss man folgendes Javascript in die Webseite implementieren:

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

Zur Erklärung:
iOS Geräte unter Safari erkennen keine :hover Effekte. Diese werden als Eingabe erkannt,
weshalb ein Link der mit CSS bearbeitet wurde, doppelt betätigt werden muss.

Quellen:
hover problem causes the user to double click a link
iOS has a hover problem



, , , ,

Keine Kommentare


Bis jetzt noch keine Kommentare

Einen Kommentar abgeben

Themen:

51 Artikel in 7 Kategorien:

  • Backup (2)
  • Exchange Server (16)
  • Linux (6)
  • Microsoft Server (6)
  • Tutorials (8)
  • Virtualisierung (2)
  • Windows (11)