Material Angular 导航栏在 iPhone 浏览器上没有响应

Question

我是 Material 使用 angular 进行设计的新手。我正在使用 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 屏幕截图

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

Answer 1

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

Material Angular 导航栏在 iPhone 浏览器上没有响应

Material Angular with NavBar not responsive on iPhone browser

angularjs

material-design

angular-material