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