Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Responsive Web Design RWD - iOS (und Android) Specials

Freitag, 25. August 2017

Einige Tipps & Kniffe, die mir beim Erstellen von mobile-freundlichen Webseiten schon oft geholfen haben.

Unstreitig das wichtigste Meta-Element - gehört in den <head>-Bereich jeder Seite:


<meta name="viewport" content="width=device-width, initial-scale=1">

Dieses Meta-Element bewirkt, dass der Inhalt an die Monitorgröße angepasst wird.

Als nächstes wollen wir vermutlich vermeiden, dass sich die Schriftgröße ändert, wenn das Smartphone statt im Hoch- im Querformat gehalten wird.

Hierzu dient die CSS-Anweisung:

html {
-webkit-text-size-adjust: 100%;
}

Und jetzt noch zwei Spezialfälle:

  1. Beim Antippen eines Links blitzt kurz ein dunkler Hintergrund auf. Die Farbe dieses Hintergrunds kann man mittels CSS nach Bedarf einstellen:
    element {-webkit-tap-highlight-color: red;}
    Nützlich kann es in besonderen Fällen sein, diese Hintergrundfarbe auf transparent zu setzen.
    Mehr zu diesem Trick bei MDN web docs
  2. Falls der Link mittels JavaScript eine weitere Funktion ausübt, z.B. Öffnen eines Untermenüs o.ä., kann es vorkommen, dass der Hyperlink erst bei einem zweiten Tippen ausgeführt wird. Ohne weiteres Zutun ist der Link bzw. die Site dann kaputt, weil man vom Besucher nicht erwarten kann, dass er so eine ungewöhnliche Aktion ausführt.
    Abhilfe schafft ein kleines JavaScript-Snippet:
    <script>document.addEventListener("touchstart", function(){}, true);</script>
    Mehr dazu bei coffeebreak-blog.de

PS: Alle Snippets sind natürlich vom Betriebssystem unabhängig, funktionieren also grundsätzlich sowohl unter iOS als auch Android, weil sie ausschließlich das Rendering durch den jeweiligen Browser betreffen.


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE