移动响应式下拉导航栏适用于小宽度浏览器，但不适用于我的手机答案

【问题标题】：Mobile responsive dropdown navigation bar works on small width browser but not on my phone移动响应式下拉导航栏适用于小宽度浏览器，但不适用于我的手机
【发布时间】：2018-07-03 11:59:38
【问题描述】：

移动响应式下拉导航栏适用于小宽度浏览器，但不适用于我的手机。当我将浏览器宽度设置为

$('.dropdown').on('click', function() {
  $('.container').children().toggle();
  $('.dropdown').show();
  $('.space').hide();
});

.navigation {
  background-color: #151719;
}

.container {
  display: flex;
}

.container>li {
  padding: 10px;
  text-align: center;
  font-size: 1em;
  color: white;
  box-sizing: border-box;
  background-color: #151719;
  list-style-type: none;
}

.space {
  flex: 1;
}

.dropdown {
  display: none;
}

@media all and (max-width: 1100px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex: 1 1 100%;
  }
  .space {
    display: none;
  }
  .dropdown {
    display: block;
  }
  .container>li {
    display: none;
  }
  .container>.dropdown {
    display: block;
    cursor: pointer;
  }
  .dropdownImg {
    float: right;
  }
}

@media only screen and (max-width: 600px) {
  .flex-grid-home {
    display: none;
  }
  .flex-grid {
    display: block;
  }
  .flex-grid {
    margin-right: 10px;
    margin-left: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="container">
      <li class='dropdown'></li>
      <li class='ey'><a href="">1</a></li>
      <li class='ey'><a href="">2</a></li>
      <li class='ey'><a href="">3</a></li>
      <li class='ey'><a href="">4</a></li>
    </ul>
  </div>
</nav>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我建议您检查是否在标题中添加了以下行：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

如果没有添加，请在标题部分添加上述代码。

<head>
<title>sample header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

【讨论】：