Question

我是使用棱角分明的Material Design新手。我使用codepen中的代码作为学习Angular Material的指南。我注意到它是使用Chrome在桌面浏览器中呈现时的响应，但在使用iPhone 5的默认浏览器在iPhone上呈现时表现得像普通的html。 Material是否没有Safari的响应功能支持？

<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>

{{1}}

这是iPhone截图

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

Answer 1

您是否尝试过定义视口？将此标记放在self中： <head>

具有NavBar的Material Angular在iPhone浏览器上无响应

1 个答案: