Nicolas: Mobilbrowser: Unterfließen eines DIVs durch BODY beim Zoomen

Hallo zusammen,
ich versuche gerade meine Website ins Zeitalter der Mobilbrowser zu retten, ohne daß die normale Web-Ansicht sich groß ändert. Diese Problemstellung dürfte vermutlich nicht selten sein - mir fehlen also vermutlich die Suchbegriffe, um eine vernünftige Beschreibung zu finden.

Für das beobachtete Phänomen habe ich eine kleine Testseite geschrieben:
Testseite für Mobilbrowser

In einem normalen Desktop-Browser sieht das dann so aus:
Ansicht Desktop-Browser

In einem Mobil-Browser schiebt sich jedoch beim "Pinch-Zoom" der Inhalt des BODY-Elements unter das DIV, das ein Navigationsmenü auf der linken Seite darstellt. Das sieht dann so aus:
Ansicht Mobil-Browser
(beide Ansichten sind mit Google Chrome erzeugt worden).

Damit muß ständig horizontal gescrollt werden, Bilder befinden sich plötzlich außerhalb des Viewports und häßlich ist es obendrein. Selbst Lynx erzeugt eine besser lesbare Ansicht als Chrome oder Opera auf einem Tablet.

Gibt es:
 a) Die Möglichkeit, einem Mobilbrowser nahezulegen, einfach wie ein normaler Desktop-Browser umzubrechen und zu "floaten" oder
 b) ihm wenigstens klarzumachen, daß das DIV-Element nicht unter- sondern umflossen werden soll?

Viele Grüße
Nicolas

  1. @@Nicolas:

    nuqneH

    Gibt es:
    a) Die Möglichkeit, einem Mobilbrowser nahezulegen, einfach wie ein normaler Desktop-Browser umzubrechen und zu "floaten" oder
    b) ihm wenigstens klarzumachen, daß das DIV-Element nicht unter- sondern umflossen werden soll?

    Die Antwort auf all deine Fragen ist Responsive Web Design.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar

      Die Antwort auf all deine Fragen ist Responsive Web Design.

      Hallo Gunnar,
      danke für die Antwort. Allerdings bin ich bis jetzt davon ausgegangen, genau diese Sachen in der Beispielseite schon umgesetzt zu haben: Bei einer Bildschirmbreite (min-width) kleiner als 640px wird auf ein Mobil-Layout umgeschaltet, das die genannten Float-Probleme nicht hat.

      Das funktioniert aber nur bei Mobiltelefonen. Tablets behaupten von sich, eine Viewport-Breite größer als 1024 Pixeln zu haben und bleiben deshalb auf dem Desktop-Layout - mit den genannten merkwürdigen Verschiebeeffekten.

      1. Aloha ;)

        Ich glaube, Gunnar meinte damit etwas anderes. Wie ich Gunnar kenne, zielte er damit eher in die Richtung: Auf responsive designten Webseiten sollte man nicht zoomen müssen.

        Übrigens glaube ich, dass du selbst noch nicht ganz verstanden hast, wo das Problem liegt. Ich versuch mich mal an einer Aufklärung.

        Dein Text schiebt sich beim Zoomen nicht "unter" die Navigation. Du wirst feststellen: Beim Zoomen kannst du dann horizontal scrollen. Und wenn du ganz nach links scrollst bekommst du die Sache so wie du sie haben willst, der von dir vorgesehene Abstand bleibt also vorhanden.

        Das liegt grundsätzlich daran, dass der Pinch-Zoom offenbar anders funktioniert als normaler Zoom. Der normale Zoom verändert intern - so wie ich das sehe - die virtuelle Viewportgröße und stellt dadurch alles größer, aber in gleichen Proportionen dar. Zum Nachprüfen: Wenn du (ich nutze Google Chrome unter Windows, andere Browser verhalten sich u.U. anders) den Zoom erhöhst, stellt deine Testseite irgendwann auf mobiles Layout um.

        Der Pinch-Zoom tut etwas anderes. Er behält die virtuelle Viewportgröße (die, die der Webseite bekannt ist) und verkleinert lediglich den sichtbaren Bildausschnitt (auch hier: meine Testergebnisse kommen von Chrome mobile / Android).

        Was das für einen Unterschied macht: Unter Android bleibt die Navigation an den Bildschirm angeheftet, während sich alle Proportionen verschieben, an der Darstellungsbreite der Seite (und damit am Umbruchverhalten) ändert sich nix. Das ist in etwa der Effekt, den du erhalten würdest, wenn du für deinen body eine Breite erzwingst, die über die Viewportgröße hinausgeht.

        Fazit: Du musst die Positionierung deiner Navigation anders lösen. position:fixed ist hier wohl nicht geeignet. Oder: Du ignorierst das einfach - warum auch mit Mobilgerät zoomen, wenn dein Design ordentlich responsiv ist? Zumal man durch horizontales Scrollen immer noch alles sieht.

        Was du noch versuchen kannst: Ich weiß ja nicht... Vielleicht lohnt es sich mal zu testen, ob der Pinch-Zoom die Viewport-Größe beibehält und beim Zoomen lediglich die Device-Größe runtersetzt. Vielleicht kannst du so über media-query das Pinch-Zoom-Verhalten mit abfangen? Probiers doch mal aus ;) Wäre sicher für alle interessant.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hallo RIDER,

          Du hast das Phänomen jetzt etwas genauer und umfassender beschrieben als ich. Ich fasse zusammen:

          - Ein "normaler" Webbrowser nutzt als Viewportgröße ohne Zoom immer seine tatsächliche Breite des Fensters. Beim Zoom wird die Viewportgröße verkleinert und die Darstellung vergrößert. Das führt bei meinem Layout zu dem Effekt, daß irgendwann auf Mobilansicht umgeschaltet wird (das ist aber nur ein Nebeneffekt.

          • Ein Mobilbrowser hat schon ohne Zoom eine Viewportgröße, die größer als die tatsächliche Bildschirmbreite ist. Bei meinem Android-Tablet z.B. ist die Viewportgröße größer 1000 Pixel, obwohl das Display nur 800 Pixel hat.

          • Beim Pinch-Zoom ändert sich die Viewportgröße nicht.
              * Die Bilder (float:right) bleiben auf dem Vieport auf der gleichen Stelle (sind also meist außerhalb des Bildschirms)
              * Text wird neu umgebrochen
              * Divs mit "position:fixed;" bleiben an ihrer Stelle.
              * Da die Viewportgröße immer gleich bleibt, wird der Mobilbrowser nie auf das schmale Layout umschalten, egal wie stark gepinchzoomts wird.
              * Der Mobilbrowser ignoriert auch @media mobile.

          Bislang war ich davon ausgegangen, ein ausreichend "responsives Design" zu haben- immerhin floatet auf allen PC-Browsern mit und ohne CSS mit und ohne Bilder und selbst bei Lynx alles so, daß es gut lesbar ist. Nur der Mobilbrowser will krampfhaft alles durcheinanderzoomen. Und jetzt das deprimierende: Ich habe noch keine Website mit Navigationsmenü gefunden, bei der mir das Verhalten auf dem Mobilbrowser gefällt.

          Ist die einzige Möglichkeit, eine Seite ins Mobilzeitalter zu retten, auch dem PC-Nutzer ein Navigationsmenü vorzuenthalten?

          Viele Grüße
          Nicolas

          1. Aloha ;)

            Du hast das Phänomen jetzt etwas genauer und umfassender beschrieben als ich. Ich fasse zusammen:

            • Ein "normaler" Webbrowser nutzt als Viewportgröße ohne Zoom immer seine tatsächliche Breite des Fensters. Beim Zoom wird die Viewportgröße verkleinert und die Darstellung vergrößert. Das führt bei meinem Layout zu dem Effekt, daß irgendwann auf Mobilansicht umgeschaltet wird (das ist aber nur ein Nebeneffekt.

            • Ein Mobilbrowser hat schon ohne Zoom eine Viewportgröße, die größer als die tatsächliche Bildschirmbreite ist. Bei meinem Android-Tablet z.B. ist die Viewportgröße größer 1000 Pixel, obwohl das Display nur 800 Pixel hat.

            • Beim Pinch-Zoom ändert sich die Viewportgröße nicht.
                * Die Bilder (float:right) bleiben auf dem Vieport auf der gleichen Stelle (sind also meist außerhalb des Bildschirms)
                * Text wird neu umgebrochen
                * Divs mit "position:fixed;" bleiben an ihrer Stelle.
                * Da die Viewportgröße immer gleich bleibt, wird der Mobilbrowser nie auf das schmale Layout umschalten, egal wie stark gepinchzoomts wird.
                * Der Mobilbrowser ignoriert auch @media mobile.

            So weit, so richtig.

            (Anmerkung: Damit Mobilbrowser auf kleine Ansicht umschalten, solltest du eventuell eher oder zusätzlich auf device-width setzen und @media mobile ist imho nicht standardkonform, Smartphones und Co. hören auf screen)

            Ist die einzige Möglichkeit, eine Seite ins Mobilzeitalter zu retten, auch dem PC-Nutzer ein Navigationsmenü vorzuenthalten?

            Nein, sehe ich nicht so. Ich schätze einfach, dass wir als Webentwickler auf das Mobilzeitalter bisweilen mit unkonventionellen Mitteln reagieren müssen. Wir müssen wohl damit rechnen, dass wir position:fixed in Zukunft überdenken müssen. Ganz gefahrlos wird das wohl nur dann einsetzbar sein in Zukunft, wenn es in der Breite bildschirmfüllende Inhalte ganz oben oder unten sind. Elemente links und rechts müssen wir ihn Zukunft wohl gut abwägen.

            Ich möchte dir aber noch eine Idee zur Problemlösung geben. Wir hatten hier in letzter Zeit ein paar Threads mit Navi-Problematiken, dabei hat einer vielleicht indirekt eine Lösung für dein Problem. JPL's Navi auf http://www.jochen-lipps.de ist nämlich auch links vom content per fixed positioniert. In diesem Fall ist es aber so, dass das beim Zoomen nicht stört - weil der Content einen höheren z-index als die navi hat und somit im Zweifelsfall (bei Überschneidung) über der navi liegt. Sowas sollte bei dir auch nicht allzu schwer umsetzbar sein.

            Du siehst: Durch den klugen Einsatz geeigneter Mittel gibt es schon noch Möglichkeiten. Auch wenn du generell Recht hast, das Mobilzeitalter stellt an uns als Entwickler ganz neue, teils ungeahnte Anforderungen.

            Wenn dich die konkrete Technik hinter verlinkter Navigation noch zusätzlich interessiert - die kannst du hier im Forum in unseren ellenlangen Postings (aufgeteilt auf zwei Threads) nachvollziehen.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
            1. In diesem Fall ist es aber so, dass das beim Zoomen nicht stört - weil der Content einen höheren z-index als die navi hat und somit im Zweifelsfall (bei Überschneidung) über der navi liegt.

              Danke für das Stichwort "z-index". Damit war es tatsächlich kein Problem, das Menü beim Pinch-Zoom hinter dem BODY zurücktreten zu lassen, so daß nicht mehr alles total schlecht lesbar ist - und ich bin mit dem Layout total zufrieden bei fast allen Mobilbrowsern, die ich getestet habe (Opera, Opera Mini, Chrome, Android-Standard-Browser). So zufrieden, daß das neue Layout schon online ist.

              Der einzige Browser, bei dem es nicht klappt und der Text des DIVs immer noch über dem BODY liegt, ist "UC Browser"- der aber in den Nutzungstatistiken meiner Website bis auf meine eigenen Versuche noch nie aufgetaucht ist. Und auch hier treten nur Probleme auf bei der Kombination "UC Browser + Virtueller Viewport > 601Pixel + Pinch-Zoom". Damit kann ich leben.

              Ein wenig bin ich noch unschlüssig, ob es Browser gibt, bei denen der Aufbau Probleme bereiten könnte. Momentan sieht er ungefähr so aus:

                
              <HEAD>  
                  <style type="text/css">  
                      @media only screen and (min-width:641px) {  
                          body { position:relative; margin-left:170px; }  
                
                          div#menu {position:fixed; z-index:-10; display:block; }  
                
                          div#hintergrund {  
                              position:absolute;  
                              top:-1px; left:-1px; bottom:0px; right:0px;  
                              width:auto; height:auto;  
                              background-color:#FFFFFF;  
                              z-index:-5;  
                         }  
                      }  
                  </style>  
              </HEAD>  
              <BODY>  
                
                  lorem ipsum undsoweiter seisdrum.  
                
                  <DIV id="menu">  
                      Menü  
                  </DIV>  
                
                  <!-- Leeres Div bildet Hintergrund fuer Body, um Menue zu verdecken -->  
                  <DIV id="hintergrund"></DIV>  
              </BODY>  
              
              

              Damit könnte ein Browser, der z-Index nicht kennt, das DIV im Hintergrund erzeugen und damit den Text verdecken. Bislang hat aber keine meiner Browser da Probleme gehabt (Es träte nur auch mit einem Browser, der "@media only screen" versteht, "z-index" jedoch nicht). Es ist vermutlich schwer abzuschätzen, wieviele es da gibt.

              Kurzum: Ich bin zufrieden. Danke für die Diskussion!

              1. Aloha ;)

                Damit könnte ein Browser, der z-Index nicht kennt, das DIV im Hintergrund erzeugen und damit den Text verdecken. Bislang hat aber keine meiner Browser da Probleme gehabt (Es träte nur auch mit einem Browser, der "@media only screen" versteht, "z-index" jedoch nicht). Es ist vermutlich schwer abzuschätzen, wieviele es da gibt.

                Unwahrscheinlich, dass es sowas überhaupt (noch) gibt. z-index ist schon seit 1998 standardisiert und wird in den gängigen Browsern (und damit in den großen Engines) schon lange umgesetzt (siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=hier links oben). Tatsächlich ist z-index wahrscheinlich sogar einige der ersten CSS2-Eigenschaften, die wirklich weit verbreitet (mehr oder weniger richtig) interpretiert wurden.

                Nicht-Standard-Browser kochen meist auch nur mit Wasser, d.h. auch die bedienen sich bei den großen Engines (WebKit - Safari/Chrome/Opera, Gecko - Netscape/Firefox, Trident - Internet Explorer) und bauen nur ihr UI und Zusatzfeatures selbst... Niemand von denen macht sich die (unnötige) Mühe, das Rad neu zu erfinden.

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  2. Hi,

    Gibt es:
    a) Die Möglichkeit, einem Mobilbrowser nahezulegen, einfach wie ein normaler Desktop-Browser umzubrechen und zu "floaten" oder

    ja
    Die einfachste Möglichkeit, ist mit float.
    zB.
    div { float:left; }

    wenn deine Container klein genug sind, setzen sie sich untereinander.

    Viele Grüße aus LA

    --
    ralphi
    1. Hi,

      Gibt es:
      a) Die Möglichkeit, einem Mobilbrowser nahezulegen, einfach wie ein normaler Desktop-Browser umzubrechen und zu "floaten" oder
      ja
      Die einfachste Möglichkeit, ist mit float.
      zB.
      div { float:left; }

      wenn deine Container klein genug sind, setzen sie sich untereinander.

      Viele Grüße aus LA

      Hallo ralphi,
      ich verstehe nicht genau, was Du meinst: BODY ist doch kein Container? Wie kann es dann einen DIV umfließen, der in ihm enthalten ist?

      Viele Grüße
      Nicolas

      1. Hi,

        ich verstehe nicht genau, was Du meinst: BODY ist doch kein Container? Wie kann es dann einen DIV umfließen, der in ihm enthalten ist?

        Rider hat schon recht.
        Dein Menu darf dann nicht mehr fix sein, sondern einzelne Elemente..

        Den Effekt den ich meine, ist wie ähnlich Win8 Kacheln, nur halt mit größeren Kacheln.
        Hab ich so schon umgesetzt – kuckt ganz lustig aus :-)
        Die Anordnung ändert sich nicht nur bei unterschiedlichen Device, sondern auch bei 'landscape' etc.

        Viele Grüße aus LA

        --
        ralphi
    2. Aloha ;)

      Die einfachste Möglichkeit, ist mit float.
      zB.
      div { float:left; }

      wenn deine Container klein genug sind, setzen sie sich untereinander.

      Das kann im gegebenen Beispiel nicht die Lösung sein. Die Navigation ist per position:fixed positioniert, ist also aus dem Elementfluss ausgenommen, kann also nicht mehr mit normal positionierten Elementen floaten...

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[