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

Beitrag lesen

SELF-Forum

Mobilbrowser: Unterfließen eines DIVs durch BODY beim Zoomen

Nicolas Homepage des Autors
– Informationen zu den Bewertungsregeln

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!

Beitrag melden
–
Informationen zu den Bewertungsregeln