Anzeige der Test-Homepage mit Android-Browser "Internet" völlig unterschiedlich und teils unkomplett

[Martin L. aus E.]

Wir sind ja dabei, die derzeit online befindliche Homepage für das Smartphone zugänglich zu machen (Link siehe oben), und dabei haben wir festgestellt, daß - wenn die Test-Seite mit dem Android-Browser "Internet" betrachtet wird, das völlig unterschiedliche Darstellungen gibt:

Nur zur Info: Da unter Android und iOS jeder Browser die systemeigene Webseitendarstellungskomponente (oder wie das heisst) verwenden muss (sonst gibt es keine Freigabe von Google bzw. Apple), müssten die Probleme jeden Browser betreffen.

Android 4.1.2 Seite fehlerhaft dargestellt. a) Grafik "audiobibel.png", das ist die Grafik, welche auf allen Seiten im Kopf erscheint, wird nicht angezeigt; die anderen Grafiken schon

Dafür sehe ich jetzt keinen Grund gegenüber 4.4.2.

Du könntest versuchen, die Grafik mit anderen Optionen zu speichern oder, falls dein Grafikprogramm das nicht zulässt, ein Optimierungswerkzeug wie pngcrush oder optipng benutzen, die letztlich den gleichen Effekt haben. Beide arbeiten verlustfrei, sind also nur von Vorteil; in deinem Fall kann die Grafik um ein Drittel auf 30k reduziert werden.

Falls andere PNG-Grafiken vorhanden sind: Mit pnginfo lassen sich Details zu den Dateien anzeigen, vielleicht ergibt sich damit ein Hinweis auf die technische Ursache.

Es gibt bei Android wohl eine Größenbegrenzung, die greift aber erst, geräteabhängig, ab zwei- bis dreitausend Pixeln Höhe bzw. Breite. Davon ist diese Grafik, auch wenn sie schon sehr groß ist, noch deutlich entfernt.

Unabhängig: Für derartige Titelgrafiken -praktisch nur Text- solltest du tunlichst kein Pixelformat wie PNG benutzen (JPEG sowieso nicht). Alleine, was du dadurch an Informationen verlierst, falls der Leser nicht sehen kann, egal ob menschlich-fehlsichtig oder Suchmaschinenbot, ist äußerst betrüblich. Das scheint mir hier ganz besonders zu gelten, weil Vorgelesenes gerade für Fehlsichtige von Interesse sein dürfte, mithin ein wenig Mühe gerade hier eher nicht vergebene Liebesmüh' wäre.

Und wenn ich jetzt gerade daran denke, dass du für vielleicht 150 Buchstaben und ein paar Leerzeichen sage und schreibe 44071 Bytes verbrätst (statt der vielleicht 150, die reichen täten), wird mir ganz schwummerig …

Setze den Kopfhörer und das Buch in eigene Grafiken und den Untertitel ("deutschsprachige MP3-Dateien" usw.) als Text in den HTML-Code. Der eigentliche Titel sollte IMHO auch als Text gegeben werden, denn an der Schriftart ist nun nichts, was eine Pixelgrafik rechtfertigen würde. Falls die Schwingungen es dir aber so sehr angetan haben, probiere wenigstens SVG statt PNG, das sieht nicht so pixelig aus.

b) die Farben werden nicht dargestellt (alles weiß) c) die Rahmen sind nicht mehr abgerundet, sondern eckig

/* Globale Variablen */
:root {
  --farbe_at_dunkel:        hsl(203, 47%, 72%);     /* Die dunkelste Farbe im AT */

  --randradius:             8px;                    /* Radius eines beliebigen Randes*/

Android unterstützt erst ab der nach Version 4.4.4 folgenden Version 56 CSS-Variablen, siehe http://caniuse.com/#search=css variables .