导航栏折叠 --> Bootstrap

Question

我正在建立一个网站：http://www.sbr-accounting.com/

现在我的菜单可以响应了。因此，当您减小屏幕宽度时，菜单将消失，只会显示一个菜单按钮。太棒了！

但是为什么我在Iphone（5S）打开网站时菜单显示完整，我预计菜单会默认显示为折叠。

有人可以帮我吗？

  <!-- Create full width navbar -->
    <div class='navbar navbar-default navbar-static-top'>

      <!-- Inside full width navbar create a container -->
      <div class='container'>

        <div class='navbar-header'>
          <!-- Website title including home link -->
          <a href='index.html' class='navbar-brand'>SBR-accounting</a>


          <!-- Create nav icon for small displays. The text should only be visible for screen readers -->
          <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>  <span class='sr-only'>Toggle navigation</span>    

          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          </button>
         </div>

          <ul class='nav navbar-nav navbar-right collapse navbar-collapse'>
            <li><a href='/'>home</a></li>
            <li><a href='/'>Informatie</a></li>
            <li><a href='/'>Contact</a></li>
          </ul>

        </div> <!-- Close container inside navbar -->
      </div> <!-- Close full width navbar -->

Answer 1

我通过桌面和移动设备查看了您的代码。在 <head> 标签中，您缺少视口 <meta> 标签。

来自 Bootstrap documentation

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

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

Here 您可以找到有关视口基础知识的一些解释。从那里我推断出这个解释：

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

导航栏折叠 --> Bootstrap

navbar collapse --> Bootstrap

jquery

navbar

twitter-bootstrap