在移動設備上使用側欄定位的CSS問題

Question

我遇到了側欄菜單的問題。在Samsung Galaxy Note 2和Chrome瀏覽器位置等某些Android設備上：菜單的固定位置和實際位置均失敗，菜單顯示在我的網站上。這是一個CSS代碼。我尋找的解決方案，只有答案我得到，我需要使用

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

我做到了，但問題仍然存在。我是製作移動兼容網站的初學者，無法找出造成問題的原因。希望你的幫助。

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. Sry爲我的英語不好。

Answer 1

您可以使用@media規則，用於爲不同的媒體類型/設備定義不同的樣式規則。

@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; 
} 

} 

檢查最小寬度爲三星Galaxy注2.試圖爲移動的相容性和變化的CSS按照設備（寬度）使用@media規則。