iPhone 4上的Bootstrap菜单Spry Mobile已损坏

Question

所以我正在开发一个项目并使用Bootstraps菜单折叠元素。但是，在iPhone上，我的代码就像这里的图片一样。

我不知道如何解决它并修复它。它在iPhone 5和iPhone 6及更高版本上运行良好，但仅在iPhone 4上打破。在这种意义上，仿真器不可靠。

Here is my codepen.

<nav class="navbar navbar-fixed-top" data-spy="scroll">
  <div class="container-fluid">
    <div class="navbar-header">
       <div class="row">
        <a class="navbar-brand col-lg-12 col-md-12 col-sm-12 col-xs-6" href="body"><img src="http://bowhunting.com/resources/images/logo.png" class="img-responsive" alt="Rhino Group Logo"></a>
        <div class="col-xs-1 col-xs-offset-1 visible-xs phone text-center"><a href="tel:+18475158000"><i class="fa fa-phone"></i></a></div>
        <button type="button" data-toggle="collapse" data-target="#navigation-bar" class="navbar-toggle collapsed col-xs-2">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse pull-right" id="navigation-bar">
        <ul class="nav navbar-nav">
          <li class="caps"><a href="#Services">services</a></li>
          <li class="caps"><a href="#Portfolio">portfolio</a></li>
          <li class="caps"><a href="#Contact">contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>