div layer 100% position absolute

[Baasel]

Hallo liebe Leute,

ich will ein div Layer über die ganze Seite anzeigen lassen, was im FF und Chrome wunderbar funktioniert, nur wird es auf Handys und Tablets falsch angezeigt.

<div id="wrapper">
    <div class="inside">          
        <div id="menu_oben">
            bla blub
        </div>
    </div>
</div> 

#menu_oben{
    position:absolute;
    width: 100%;
    top:0;
    left:0;
    right:0;
    height:28px;
    background-color: #002300;
    z-index:10;
}

#wrapper {
    width: 1280px;
    margin-left: auto ;
    margin-right: auto ;
} 

Fehler von mir oder Fehler vom Browser der Mobilgeräte? Wie bewirke ich es das es auch auf Mobilgeräten korrekt angezeigt wird?

|--------------------------------|
|                                |
|      |-----wrapper------|      |
|      |------------------|      |
|      |------------------|      |
|-----------absolute-------------|
|--------------------------------|
|      |------------------|      |
|      |------------------|      |
|      |------------------|      |
|      |------------------|      |
|                                |
|--------------------------------| 

[nikosch]

nur wird es auf Handys und Tablets falsch angezeigt.

Sehr aussagekräftig.

[Baasel]

tut mir leid, ich kann jetzt kein Screenshot von der Seite von meinem Handy machen. Ich könnte es erklären aber ob ihr dann denn versteht ist 'ne andre Frage...

Der 100% div Layer wird nur als 80% angezeigt? Und auf einem LG Tablet wird die Komplette Seite gedoppelt? So besser? Keine Ahnung wie ich es beschreiben soll...

Vllt wäre dann die Antwort, simuliere doch einfach per VM ein Android und guck dir damit die Seite an, besser

Zudem habe ich schon die Aussage gegeben: 1. div layer mit fixer breite 2. div layer mit 100% absolute -> FF OK, Chrome OK, andere browser auf Mobilgeräten? Oder ist die css falsch?

Also, sehr aussagekräftig die Antwort, danke

[rkr]

Ja, mach mal ein Screenshot. Viewport korrekt gesetzt?

[nikosch]

Zudem habe ich schon die Aussage gegeben: 1. div layer mit fixer breite 2. div layer mit 100% absolute -> FF OK, Chrome OK, andere browser auf Mobilgeräten? Oder ist die css falsch?

Watt willer?

[strub]

Nur nebenbei

width: 1280px;

halte ich für falsch, wenn du das Design Responsive machen willst. Wenn schon "max-width".

[Arne Drews]

Genau da wird auch das Problem liegen, denn es gibt Tabs, die mehr wie 1280 Pixel drauf haben. Du sagst aber dem Wrapper, daß er nur 1280px breit sein darf.
Bei einem Tab-Display mit bspw. 1440px horizontal, sind 1280 nur etwa 88%.

[Crusher89]

Mobile Geräte und Tablets nutzen zudem auch eine besondere Browser Einstellung: Nämich die Zoom Anpassung. So einfach ist das nämlich leider nicht.

Ich würde dann für mobile Geräte eine seperate Seite erstellen. Dann wäre das Problem zumindest teilweise gelöst.