移动设备上侧边栏定位的 CSS 问题

Question

我的侧边栏菜单有问题。在三星 Galaxy Note 2 等一些 Android 设备上和 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>

附：对不起我的英语不好。

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 Note 2 的最小宽度。尝试使用@media 规则来实现移动兼容性，并根据设备（宽度）更改 css。