Contao Camp 2019 in München - Save the date!
Ergebnis 1 bis 4 von 4

Thema: Problem mit CSS "position:fixed" und mobilen Browsern

  1. #1
    Alter Contao-Hase Avatar von soweit_ok
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard Problem mit CSS "position:fixed" und mobilen Browsern

    Ich gebe Header und Footer mit fixer Positionierung aus, damit Topnavi, Login-Modul etc. immer ohne Scrollen erreichbar sind.

    Hätte ich gern nicht nur auf dem Desktop, sondern auch auf Smartphones, wenn´s denn geht. Dort rutschen diese Bereiche jedoch gern irgendwo in die Mitte, jedenfalls funktioniert es in keiner der bislang von mir getesteten Betriebssystem-/Mobilbrowserversionen zuverlässig. Ich las auch schon in verschiedenen Foren, dass dies wohl ein noch immer sehr verbreitetes Standardproblem ist.

    Wie auch immer, mit der Anweisung "user-scalable=no" klappt es komischerweise prima. Dummerweise möchte ich aber dem User das uneingeschränkte Skalieren eigentlich nicht verbieten, obwohl ich sämtlichen Content so gestalte, dass er von selbst möglichst optimal dargestellt wird. Den "gefühlten" Vorteil also nur ungern mit einem anderen Nachteil erkaufen.

    Kennt jemand von euch vielleicht eine Lösung dieses Problems, die auch ohne Skalierungsverbot funktioniert? Ansonsten interessiert mich auch, ob ihr evtl. normale Positionierung im Elementfluss sowieso besser findet, wegen des eh kleinen Viewports (bei mir Header = 32px und Footer = 26px)?

    ---------
    PS:
    Sorry, falls dies ein redundantes Posting sein sollte - hab mit der Suche nichts gefunden, was sich erkennbar mit diesem Thema befasst. Mir fiel dabei übrigens auf, dass im Unterschied zu anderen Rubriken die Überschriften der "Mobile"-Postings leider oft schwammig sind bzw. wenig bis nichts über den konkreten Inhalt aussagen.

  2. #2
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    3.844
    Partner-ID
    7421

    Standard

    "position: fixed" ist im Bereich der Mobilgeräte auf Grund der kleinen Bildschirme schon von Haus aus keine so gute Idee (abgesehen von technischen Problemen), wie Du ja schon selbst bemerkt hast. Da sollte man sich eher mit den etablierten/erprobten Techniken für mobile Navigation auseinandersetzen. Es gibt ja viele Ansätze im Internet zu finden. Hier ein Paar Links als Anregung

    http://bradfrostweb.com/blog/web/res...-nav-patterns/
    http://speckyboy.com/2013/01/30/more...ion-solutions/
    http://www.konversionskraft.de/strat...n-sollten.html
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  3. #3
    Contao-Fan Avatar von Bas
    Registriert seit
    03.12.2009.
    Ort
    Hamburg
    Beiträge
    534

    Standard

    Das Problem ist, das wenn der Inhalt vom User skaliert wird, die fix positionierten Inhalte ebenso skaliert werden (sei es das diese durch CSS oder JS-Positionsberechnung an Ort und Stelle gehalten werden). Durch die fixe Positionierung sind die nach Skalierung zu großen fixen Elemente nicht mehr komplett sichtbar bzw benutzbar. Eine Lösung wäre es den Zoomlevel mittels JS zu errechnen und in folge das CSS für die fixen Elemente anzupassen. David Bushell hat das Problem mal in seinem Blog beschrieben: http://dbushell.com/2013/09/10/css-f...d-mobile-zoom/

    Alles ein ziemlicher Overhead, ich persönlich nutze mobil keine fixen Elemente.

  4. #4
    Alter Contao-Hase Avatar von soweit_ok
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    Habt vielen Dank für die Infos und Links zum Thema. Schau ich mir an.

    Okay, ich komm damit klar. Weil mein Layout auch mobil so optimal darstellt, dass Zoomen praktisch unnötig ist. Dass sich fix positionierte Elemente nicht mit dem Zoomen vertragen, leuchtet ja auch irgendwie ein. Trotzdem finde ich, das Problem könnte in den Mobilbrowsern längst besser bzw. überhaupt gelöst sein. Wunschdenken halt. Beispielsweise nämlich so, dass zumindest fix positionierte Header- u. Footer-Elemente dann automatisch in relativer Umpositionierung dort im Elementfluss mitlaufen, nämlich oben oder unten (der Footer am besten sticky), wo sie sich beim Aufruf der Page initial befinden. Statt wüst irgendwo in der Displaymitte umherzufluppen. Am besten fände ich eine irgendwann zukünftige Möglichkeit, im Mediaquery des CSS für fix positionierte Elemente auch die alternative relative Positionierung beim Zoomen mit angeben zu können.

    Es ließe sich wohl sicher auch mit Javascript über DOM beim Zoom-Event erledigen (wird´s ja wohl geben, hab mich diesbezüglich noch nicht schlau gemacht). Na ja, neben den Standardbibliotheken und sonstigem Erweiterungsgedöns lade ich allerdings auch bereits diverse KB eigenen JS-Code für DOM-Manipulationen des Layouts. Und irgendwo sollte man auch mal einen Schnitt machen, denke ich. Denn es tendiert dazu, immer mehr zu werden. Eben weil sich immer mal wieder noch ein ärgerliches kleines Problem findet, auch wenn man die wesentlichen Schwierigkeiten schon lösen konnte.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •