Ankündigung

Einklappen
Keine Ankündigung bisher.

Position fixed - mobile Browser

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Position fixed - mobile Browser

    Hallöchen!

    Simple Problem, tausend mal gesucht, keine Lösung gefunden.

    position: fixed; macht Probleme - entweder unter iOS oder Android.

    Nach dem Setzen des Wertes funktioniert im (Win) Browser alles einwandfrei.
    Aber iOS oder Android zicken immer herum.

    Im simpelsten aller Beispiele, wie unten zu sehen, funktioniert alles unter
    Android bzw. Windows wie es soll, aber unter iOS lässt sich seltsamerweise
    das fixe Element, beim Scrollen nach rechts oder nach unten, "langsam" aus
    dem Bild schieben?

    Wie kann das denn sein?

    Gibt es unter iOS keine fixen Elemente, wenn andere Element die Fenstergröße
    deutlich überschreiten? Ich finde keine passende Lösung für alle 3 Platformen ohne
    JavaScript zur Hilfe zu nehmen...

    HTML-Code:
    div.window
    {
        width: 100%;
        height: 100%;
    }
    
    div.header
    {
        background: #202020;
        width: 100%;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        color: #fff;
    }
    
    div.content
    {
        margin-top: 60px;
        color: #ff0000;
    }
    
    
            <div class="window">
            
                <div class="header">
                    1
                </div>
                
                <div class="content">
                    
                    <div style="width: 2000px; height: 4000px;">123</div>
                    
                </div>
            
            </div>

  • #2
    Du brauchst die IOS5 Version, damit das ordentlich funktioniert, darunter geht es nur mit scrolling.

    Kommentar


    • #3
      Das iOS Gerät hat die aktuellste OS Version.

      Im übrigen konnte ich bereits selbst in Erfahrung bringen, dass position: fixed; erst ab iOS 5.0 integriert wurde.
      Tut mir leid, aber der Beitrag war nicht wirklich hilfreich...

      Kommentar


      • #4
        Du zeigst nur einen Codeauschnitt. Weder doctype noch scale-Informationen sind ersichtlich. Der Code muss einwandfrei sein und initial-scale auf 1.

        Kommentar


        • #5
          Es ist doch eigentlich ersichtlich nach was ich suche oder nicht?

          Wie im Text bereits erwähnt, funktioniert position: fixed in Android und Windows einwandfrei.
          Lediglich iOS "spinnt" so wie ich es beschrieben habe, d.h. der "Code" ist grundsätzlich nicht falsch.
          Allerdings scheint es in CSS Tricks zu geben, die ich nicht kenne und nicht in HTML.

          (wie iOS "spinnt" habe ich ebenfalls beschrieben)
          HTML-Code:
          <!doctype html>
          <html lang="de">
              <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
          Aber wenn sich dadurch etwas ändert, hier die verlangten Zeilen...

          Kommentar


          • #6
            Um der Sache auf den Grund zu gehen gib dem content mal folgendes mit : overflow:scroll; max-width: beispielsweise 200px; dann müsste der fixe header stehen bleiben...
            ansonsten ist flexbox sicher auch eine gute Lösung..

            Kommentar


            • #7
              Zitat von kaminbausatz Beitrag anzeigen
              Um der Sache auf den Grund zu gehen gib dem content mal folgendes mit : overflow:scroll; max-width: beispielsweise 200px; dann müsste der fixe header stehen bleiben...
              Ja, tut er tatsächlich.
              Daraus ergeben sich aber nun ganz neue Probleme.

              In deine Beispiel hat sowohl body als auch content nun Scrollbalken.
              Wenn ich body overflow: hidden; mitgebe, sind die Scrollbalken für content
              zumindest Y nicht vollständig sichtbar bzw. X absolut gar nicht.

              Das funktioniert auf diesem Weg, dann nur auf mobilen Geräten.

              Ich probiere es mal, in der schon fertigen Website einzubinden, aber ich glaube
              da besteht anscheind ein grundsätzliches Problem mit meinem Aufbau.


              #EDIT
              HTML-Code:
              html, body
              {
                  background: #eee;
                  margin: 0;
                  padding: 0;
                  height: 100%;
                  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
                  font-style: normal;
                  font-variant: normal;
              }
              
              div.wrapper
              {
                  width: 100%;
                  height: 100%;
              }
              
              div.header
              {
                  background: #202020;
                  width: 100%;
                  height: 60px;
                  position: fixed;
                  top: 0;
                  left: 0;
                  color: #fff;
              }
              
              div.menubar
              {
                  background: #202020;
                  width: 220px;
                  height: 100%;
                  position: fixed;
                  top: 60px;
                  left: 0;
                  color: #fff;
              }
              
              div.menubar.mobile
              {
                  display: none;
              }
              
              div.content
              {
                  padding: 60px 0 0 220px;
                  max-height: 100%;
              }
              
              div.content.mobile
              {
                  padding: 60px 0 0 0;
                  overflow: scroll;
              }
              max-height: 100% hat in dem Falle dafür gesorgt, dass auch Content ohne width oder hight
              Definition nicht der max-height von bsp. 100px unterliegt (nur im mobilen Browser). Ich füge
              dann per jQuery (JS) den jeweiligen Containern die Klasse mobile hinzu. Ist keine JS auf dem
              Gerät vorhanden, wird die Seite wie sowieso wie Browser dargestellt.


              #EDIT UPDATE
              HTML-Code:
              div.content
              {
                  padding: 60px 0 0 220px;
                  max-height: 100%;
                  overflow: scroll;
              }
              
              div.content.browser
              {
                  overflow: visible;
              }
              
              div.content.mobile
              {
                  padding: 60px 0 0 0;
              }
              Um auch zu gewährleisten, dass der header fixed im mobilen Browser ist, wenn JS deaktiviert ist,
              gebe ich dem content Element permanent "scroll" mit und entferne es mit JS nur im Browser.
              Dadurch verschwinden die doppelten Scrollbalken aus dem Browser, vorausgesetzt JS ist aktiviert.
              Das sollte im Browser aber Vorraussetzung sein, nicht aber auf mobilen Geräten - meiner Meinung nach.


              - - -

              Bleibt nur eine Kleinigkeit offen:

              Ist im Browser JS deaktiviert, bekommt das Element content nicht die Klasse "browser",
              hat also zwangsläufig doppelte Scrollbalken. Gibt es an dieser Stelle noch einen kleinen
              Trick, zu prüfen ob JS deaktiviert ist und NUR in diesem Falle, content die Klasse "browser"
              zuweist, selbstverständlich nur in NICHT mobilen Browsern?


              - - -

              Vielen Dank aber erstmal für den super Tipp!

              Kommentar


              • #8
                Problem vollständig gelöst.

                Statt mit JS oder <noscript> festzustellen, ob JS aktiviert ist oder nicht,
                sowie gleichzeitig herauszufinden ob es ein mobiler Browser ist oder nicht,
                ist hier nur mit PHP möglich.

                Der Browser kann ja schlecht PHP blockieren... ;D

                Ich lade dann einfach je nach Situtation eine JS Datei für _mobile oder _browser hinzu.
                Damit funktioniert alles wunderbar. Dieser Schritt war auch nötig, da mobile Browser
                sich auch als nicht mobile ausgeben können und ggf. zusätzlich JS deaktiviert ist.

                (bitte entschuldigt den Doppelpost - aber mein Beitrag war bereits "zu voll" und ich möchte
                nichts löschen, falls jmd mit dem selben Problem meinen Lösungsweg verfolgen möchte)

                Kommentar

                Lädt...
                X