Question

我有一个奇怪的问题，Angular Material在手机上测试时会显示一个对话框（在iPhone 5c上测试）。

当您点击工具栏中的“Do Something”按钮时，它应该会在屏幕中间弹出一个对话框，它完全适用于Chrome和Chrome的iPhone 5c模拟。

然而，当我在实际的移动设备上测试它时，对话框被限制在菜单栏中，其高度被压扁以适应它内部的关闭按钮不起作用

这是我的问题的简化版本，只使用默认的StarterApp，底部是对话框js代码。如果您在真实的移动设备上运行它，您应该能够看到我的问题。谢谢你的帮助！

<html lang="en" ng-app="StarterApp">

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <meta name="viewport" content="initial-scale=1" />
</head>

<body layout="column" ng-controller="AppCtrl">
  <md-toolbar layout="row">
    <div layout="row" layout-align="start center" class="md-toolbar-tools">
      <h1>Hello World</h1>
    </div>
    <div layout="row" layout-align="end center" class="md-toolbar-tools">
      <md-button ng-click="doSomething($event)" aria-label="Do Something">Do Something</md-button>
    </div>
  </md-toolbar>
  <div layout="row" flex>
    <div layout="column" flex id="content">


    </div>
  </div>
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>

  <!-- custom stuff -->
  <style>
    .md-toolbar-tools h1 {
      font-size: inherit;
      font-weight: inherit;
      margin: inherit;
    }
  </style>
  <script>
    var app = angular.module('StarterApp', ['ngMaterial']);

    app.controller('AppCtrl', ['$scope', '$mdDialog',
      function($scope, $mdDialog) {
        $scope.data = {};

        $scope.doSomething = function($event) {
          var parentEl = angular.element(document.body);
          $mdDialog.show({
            parent: parentEl,
            targetEvent: $event,
            template: '<md-dialog aria-label="Do Something"><md-dialog-content><p>Hello World</p></md-dialog-content>' +
              '<div class="md-actions"><md-button ng-click="close()">Close</md-button></div></md-dialog>',
            controller: DialogController
          });

          function DialogController($scope, $mdDialog) {
            $scope.close = function() {
              $mdDialog.hide();
            }
          }
        }
      }
    ]);
  </script>
</body>

</html>

Angular Material Dialog未在移动设备上显示

0 个答案: