Die Internetseite [Oh nein, wo ist denn jetzt der Link hin...] wurde so
aufgebaut, dass sie sich optimal an dar entsprechende Endgerät und anpasst. So
passen sich Fontgrößen und Spaltenanzahl in Abhängigkeit der Bildschirmbreite
des Endgerätes an um eine optimale Lesbarkeit zu erzielen.
Mit der Einführung des iPhone 6 / iPhone 6plus ist dies
nicht mehr möglich, da ALLE nur die Useragents “Iphone” ohne Version
übermitteln. Lediglich das Betriebs-System, beispielsweise “iOS 8…” wird
mitgeteilt. Somit lässt sich anhand des Useragents nur erkennen, ob es sich um
ein Iphone oder um ein iPad oder Ipod handelt, jedoch nicht, welche
Iphone-Version oder Ipad-Version vorliegt. Die Übermittlung des iOS bringt hier
auch nicht allzu viel, da auch ein Iphone 4S sowie auch ein Ipad das aktuelle
iOS 8.x verwenden kann. Natürlich ist eine auf iPhone 6 optimierte Darstellung
für ein Ipad völlig ungeeignet (zu große Buchstaben auf dem Ipad sind das
Resultat).
Weiß hierzu jemand eine Lösung? Gerne spendiere ich eine
Flasche guten Wein aus meiner Heimat, wenn ich hier weiterkomme.
Hier noch die genauen technischen Details: Die
Seite [Oh nein, wo ist denn jetzt der Link hin...]
basiert auf einem YAML-Template-Framework, das nach besten Möglichkeiten in
Sachen Responsitivität umgesetzt wurde. Im Hintergrund agiert hier übrigens
eine Applikation, welche auf dem Zend-Framework basiert. Da es sich bei Zend
bekanntermaßen um ein System handelt, welches nicht durch freie oder
kostenpflichtige Templates zu gestalten ist (wie die meisten bekannten
CM-Systeme), sondern auf einzelne View-Dateien setzt, muss für jede Unterseite
eine eigene View-Datei bereit gestellt werden.Trotzdem ist das Layout für die
Startseite mit „Header“, „Top-Navi“ und einem darunter folgenden 3-spaltigen
Layout, sowie bei allen Unterseiten mit einem 2-spaltigen Layout und einem
vertikal verkürzten Headerbild relativ überschaubar. Generell werden
ausschließlich DIV-Container (keine Tabellen-Tags) zur Strukturierung des
Templates eingesetzt! Ein Problem stellen die mobilen Endgeräte der Apple-Reihe
dar. Während die Webseite bis zum Iphone 4S noch optimal dargestellt wird,
erscheint ab dem Model Iphone 5 bis hin zu Iphone 6 Plus ein immer mehr zunehmender
weißer Freiraum auf der rechten Seite. Aktuell setzen wir neben dem Einsatz von
Media-Queries insbesondere für die Gesamt-Breite der Webseite vier
Useragent-Sammlungen ein, welche dann jeweils eine unterschiedliche CSS-Datei
für den vertikalen und horizontalen Viewport laden. Somit kann ein Iphone der
Versionen 5 – 6 Plus entweder in die Klasse mit den zu kleinen
Smartphone-Displays (anhand der Useragent-Kennung „Iphone“) oder in die Klasse
mit den zu großen Tablet-Displays (beispielsweise anhand der Useragent-Kennung
„iOS 8“) eingeordnet werden. Wollte man dieses System weiter spezialisieren,
müsste man mit weiteren Useragent-Sammlungen und jeweils 2 CSS-Dateien
arbeiten. Das wären dann alleine für das Iphone 5, Iphone 6 und Iphone 6 Plus 3
weitere Useragent-Sammlungen und insgesamt 6 weitere CSS-Dateien. Das ist
sicherlich nicht sehr zweckmäßig, zumal es ja noch zig weitere Endgeräte mit
unterschiedlichen Viewports gibt. Somit entsteht bei den drei neueren Iphones
entweder weißer Freiraum auf der rechten Seite oder aber die Webseite fließt
deutlich über den Displayrand hinaus! Seht ihr eine andere Möglichkeit
zumindest die Geräte der Versionen 5 – 6 / 6 Plus separat zu erfassen?