Material Angular with NavBar not responsive on iPhone browser

I am new to Material Design using angular. I am using this code from codepen as a guide to learn Angular Material. What I have noticed is that it is responsive when rendered in the desktop browser using Chrome but behaves like normal html when rendered on an iPhone using iPhone 5's default browser. Does Material have no responsive feature support for Safari?

<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

  <md-toolbar class="md-theme-indigo">
    <h1 class="md-toolbar-tools">Sidenav Left</h1>
  </md-toolbar>
  <md-content layout-padding="" ng-controller="LeftCtrl">
    <md-button ng-click="close()" class="md-primary" hide-gt-md="">
      Close Sidenav Left
    </md-button>
    <p hide-md="" show-gt-md="">
      This sidenav is locked open on your device. To go back to the default behavior,
      narrow your display.
    </p>
  </md-content>

</md-sidenav>

<md-content flex="" layout-padding="">

  <div layout="column" layout-fill="" layout-align="top center">
    <p>
    The left sidenav will 'lock open' on a medium (&gt;=960px wide) device.
    </p>
    <p>
    The right sidenav will focus on a specific child element.
    </p>

    <div>
      <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
        Toggle left
      </md-button>
    </div>

    <div>
      <md-button ng-click="toggleRight()" class="md-primary">
        Toggle right
      </md-button>
    </div>
  </div>

  <div flex=""></div>

</md-content>

<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

  <md-toolbar class="md-theme-light">
    <h1 class="md-toolbar-tools">Sidenav Right</h1>
  </md-toolbar>
  <md-content ng-controller="RightCtrl" layout-padding="">
    <form>
      <md-input-container>
        <label for="testInput">Test input</label>
        <input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
      </md-input-container>
    </form>
    <md-button ng-click="close()" class="md-primary">
      Close Sidenav Right
    </md-button>
  </md-content>

</md-sidenav>

here is the iPhone screenshot

below is the expected behavior screenshot from desktop browser