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

Question

邊欄菜單出現問題。 在某些Android設備（如Samsung Galaxy Note 2）和Chrome瀏覽器中，位置：固定且菜單的實際位置失敗，菜單顯示在我的網站上。 這是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>

PS對不起，我的英語不好。

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

}

檢查Samsung Galaxy Note 2的最小寬度。嘗試使用@media規則以實現移動兼容性，並根據設備（寬度）更改css。