带有 NavBar 的 Material Angular 在 iPhone 浏览器上没有响应答案

【问题标题】：Material Angular with NavBar not responsive on iPhone browser带有 NavBar 的 Material Angular 在 iPhone 浏览器上没有响应
【发布时间】：2015-08-18 12:23:33
【问题描述】：

我是使用 Angular 的 Material Design 新手。我使用来自codepen 的代码作为学习Angular Material 的指南。我注意到的是，当使用 Chrome 在桌面浏览器中呈现时它是响应式的，但在使用 iPhone 5 的默认浏览器在 iPhone 上呈现时表现得像普通的 html。 Material 是否不支持 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>

这是 iPhone 截图

以下是桌面浏览器的预期行为截图

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

您是否尝试过定义视口？将此标签放入<head>： <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

【讨论】：

完全忽略了那个。谢谢我在头部添加了，现在一切正常。