Das if20 Forum

Forum » Sonstiges » if20 mobil

Hauptmenü wird unterschiedlich umgebrochen


Autor Nachricht
Verfasst am: 01. 04. 2011 [16:56]
Supernaut
Supernaut
Themenersteller
Dabei seit: 07.03.2011
Beiträge: 64
 Hallo.

Bei der Gestaltung eines für mobile Endgeräte geeigneten Templates ist mir folgendes aufgefallen:

Basis ist die mit if20 ausgelieferte Beispiel-Website. Die habe ich zunächst auf das Template c3_12row3 umgestellt und Shinybuttons als Hauptnavigation gewählt.

Anschließend wurde das CSS so angepasst, dass die Webseite auf eine maximale Breite von 740px kommt (CSS für body:max-width:740px). In der CSS-Datei c3_12row3.css wurde eine Sektion für mobile Endgeräte angehängt, die nur importiert wird, wenn das Gerät eine maximale Bildschirmbreite bis 800px meldet (über media-query).

Diese mobile CSS-Sektion begrenzt über CSS3 u.a. die maximale Bildschirmbreite auf die Bildschirmbreite des Gerätes mit max-width:device-width.

Das funktioniert bestens.

Die Webseite wird jetzt auf mobilen Endgeräten "umgebrochen". So soll das bei flexiblen Layouts auch sein.

Der Umbruch erfolgt aber nicht immer gleich. Ich habe folgendes Phänomen festgestellt:

Beim Aufruf einiger Seiten (z.B. Service) aus dem Hauptmenü wird das Hauptmenü korrekt in zwei Zeilen umgebrochen, wobei beide Zeilen links beginnen. Beim Aufruf der Seite "Examples" wird jedoch die zweite Menüzeile rechtsbündig angezeigt. Ich hatte auch schon Situationen, in denen die zweite Zeile mittig angezeigt wurde.

Das Verhalten konnte ich über die Breite der Menüpunkte steuern. Durch Veränderung der CSS-width-Anweisung für die Menüpunkte (96px, 120px, 160px) , wurde das Umbrechverhalten (linksbündig, rechtsbündig, mittig) verändert. Ich hatte immer einen glatten Teil von 480px für die Breite gewählt, damit der Umbruch auch rechnerisch ohne "Restpixel" klappt. Aber auch ein Wert von 100px für die Menüpunkt-Breite machte keine anderen Probleme als eben die beim "Umbrechen".

Ich konnte das auf einem Android- und einem iPhone jeweils in gleicher Art und Weise beobachten.

Ich habe zwei Bildschirmausdrucke angehängt, die das Phänomen zeigen. Einmal ist das Menü "richtig" (linksbündig) umgebrochen, einmal nicht. Beide Beispiele basieren auf dem gleichen CSS-Code und wurden unmittelbar hintereinander erstellt.

Das Verhalten ist für mich derzeit nicht kritisch, ich wollte es hier nur mitteilen.
Viele Grüße

Supernaut
Dateianhang
 phone-webseite-main_nav1.png (Typ: image/png, Größe: 15.4 Kilobytes) — 49 mal heruntergeladen
phone-webseite-main_nav2.png (Typ: image/png, Größe: 12.54 Kilobytes) — 44 mal heruntergeladen
Profil
Verfasst am: 05. 04. 2011 [20:22]
lobster_1956
Ralf-René Schröder
Dabei seit: 01.05.2008
Beiträge: 271
 ich vermute dass es kein rechtsbündig ist, sondern das das floatende li tag "hängen" bleibt ... warum leider keine Ahnung (hast du das vielleicht irgendwo auch für einen normalen Browser sichtbar im netzt ??? hab leider keine mobile Technologie dafür)
beste Grüße ... René ... der Hamburger aus dem Erzgebirge ...
Profil
WWW
Skype
Verfasst am: 06. 04. 2011 [09:56]
Supernaut
Supernaut
Themenersteller
Dabei seit: 07.03.2011
Beiträge: 64
 Die Seite ist noch nicht online. Ich hatte die Screenshots von einem Smartphone gemacht, mit dem ich auf die Entwicklungsumgebung der Seite zugreifen kann (nicht Localhost).

Noch ein Hinweis zu dem Phänomen:

Sobald beim Umbruch zwei Menüpunkte in die neue Zeile wandern, tritt das Verhalten nicht auf.

Wie gesagt, das ist derzeit nicht kritisch für mich.

Viele Grüße

Supernaut
Profil