CSS-Problem mit Positionierung der Seitenleiste auf dem Mobilgerät

Question

Ich habe ein Problem mit dem Sidebar-Menü. Auf einigen Android-Geräten wie Samsung Galaxy Note 2 und in Chrome-Browser-Position: behoben und tatsächliche Position des Menüs fehlgeschlagen und das Menü wird auf meiner Website angezeigt. Hier ist ein CSS-Code. Ich habe für die Lösung und nur Antworten suchte ich bekam, dass ich

backface-visibility: hidden; and -webkit-transform:translateZ(0); 

ich tat es verwenden müssen, aber das Problem bleibt. Ich bin ein Anfänger bei der Erstellung von Websites für mobile Kompatibilität und kann nicht herausfinden, was das Problem verursacht. hoffe auf deine Hilfe.

nav { 
    background-color:White; 
    padding-right: .25em; 
    position: fixed; 
    left: -25em; 
    top: 0; 
    padding-top: 3em; 
    box-sizing: border-box; 
    z-index: 300; 
    height: 100%; 
    -webkit-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:translateZ(0); 
    backface-visibility: hidden; 
} 

nav.active 
{ 
left: 0; 
overflow:auto; 
} 

    <script type="text/javascript"> 
//jquery for switching the class 
$('#mobile-sidebar').click(function (event) { 
     $('nav').toggleClass('active'); 
}); 
</script> 

P. S. Say für mein schlechtes Englisch.

Answer 1

Sie können @ media rule verwenden, um verschiedene Stilregeln für verschiedene Medientypen/Geräte zu definieren.

@media screen and (min-width: 480px) { 
    nav { 
    background-color:White; 
    padding-right: .25em; 
    position: fixed; 
    left: -25em; 
    top: 0; 
    padding-top: 3em; 
    box-sizing: border-box; 
    z-index: 300; 
    height: 100%; 
    -webkit-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:translateZ(0); 
    backface-visibility: hidden; 
} 

nav.active 
{ 
left: 0; 
overflow:auto; 
} 

} 

prüfen min-width für Samsung Galaxy Note 2. Versuch verwendet @media Regeln für mobile Kompatibilität und Änderung CSS als pro-Geräte (Breite).