导航栏和标题在移动设备上无法正确缩放

Question

以下是有问题的网站http://www.qsconference.com/。

这是缩放到移动尺寸的Chrome窗口上的网站的屏幕截图。

这是iPhone 7网站的屏幕截图。

我需要帮助修复移动设备上的缩放和导航栏崩溃。它似乎在使用chrome进行测试时起作用，但在移动设备上它并不起作用。

这是可折叠导航栏的代码：

<!-- Navigation -->
<div id = "nav_bar" class = "navbar-custom">
<nav class = "row navbar navbar-default">
<div class = "container-fluid">

<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class = "navbar-brand XX" style = "font-family: 'Open Sans Condensed', sans-serif;" href = "#jumbo"><i>QSC</i></a>
  </div>

   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class = "nav navbar-nav navbar-right" id = "linkList">
  <li ><a href="#about" class = "XX">QSC 2018</a></li>
  <li><a href="#delegates" class ="XX">Delegates</a></li>
  <li><a href="#sponsorship" class = "XX">Sponsorship</a></li>
  <li><a href="#speakers" class = "XX">Speakers</a></li>
  <li><a href="#team" class = "XX">The Team</a></li>
</ul>
</div>
</div>


</nav>
</div>

Answer 1

在头部添加

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

viewport 元素为浏览器提供了有关如何控制页面尺寸和缩放的说明。

width=device-width用于将文档的宽度设置为等于实际设备的宽度。

initial-scale=1.0用于在浏览器首次加载页面时设置缩放级别。