Question

我有一个侧边栏，在桌面上显示效果很好。但在移动设备上它却很奇怪。（在移动设备的模拟器上一切都很好）。这是来自移动设备的一些屏幕截图。整个显示器变大，侧边栏滚动一点，菜单的其他内容无法访问。它也会根据左侧部分的大小而变化。

screenshot 1 screenshot 2 我的html（使用bootstrap和angularjs）：

<div id="wrapper">
            <div class="row">
                <nav class="navbar navbar-fixed-top orange-back" role="navigation">
                <div class="container-fluid">
                        <div class="navbar-header">
                            <div  class="navbar-brand">
                                <a id="menu-toggle" href="" class="btn-menu toggle">
                                    <i class="fa fa-bars"></i>
                                </a>                    
                                <a class="no-decoration-link" href="#">STRICS</a>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="row">
                <!-- Sidebar -->
                <div id="sidebar-wrapper">
                    <nav role="navigation">
                        <ul class="sidebar-nav nav">
                            <h5 class="nav-group">Расходы и доходы</h5>
                            <li><a href="#newoutcome" ng-click="showingForm = 'newoutcome'">Купить материал</a></li>
                            <li><a href="#userinfo" ng-click="showingForm = 'userinfo'"> Личный кабинет</a></li>
                            <li><a href="#" ng-click="logout()"> Выйти</a></li><br><br>
                        </ul>
                    </nav>
                </div>
                <!-- Page content -->
                <div id="page-content-wrapper">
                    <div class="page-content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="view-placement" ng-view></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我的css：

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
.sidebar-nav {
  overflow: scroll;
}
#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  top: 51px;
  left: 250px;
  width: 250px;
  background: #FFAB62;
  position: fixed;
  height: 95%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.6s ease 0s;
}

#wrapper.active {
  padding-left: 0;
}

#wrapper.active #sidebar-wrapper {
  left: 0;
}

#page-content-wrapper {
  width: 100%;
  padding-top: 70px;
  transition: all 0.6s ease 0s;
  padding-right: 4px;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 20px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #41484c;
  display: block;
  text-decoration: none;
  padding-left: 20px;
}

.sidebar-nav li a span:before {
  position: absolute;
  left: 0;
  color: #41484c;
  text-align: center;
  width: 20px;
  line-height: 18px;
}
.nav>li>a {
    padding: 4px 10px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

#menu-toggle {
    text-decoration: none;
    float: left;
    color: #41484c;
    padding-right: 15px;
}

@media (max-width:767px) {
    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

    #menu-toggle {
      display: inline-block;
    }
}

Answer 1

在标记后尝试以下代码。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">

可滚动的侧边栏不会显示移动设备上的所有内容

1 个答案: