angular material 使用 phonegap 构建的设计似乎在 android 4.4 以下的版本中不起作用

Question

以下是我的html、css和js文件：

<html>
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
        <link rel="stylesheet" href="custom.css">
        <link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css">

    </head>
<body>
<div ng-controller="AppCtrl as appCtrl">
  <md-grid-list
        md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
        md-row-height-gt-md="1:1" md-row-height="2:2"
        md-gutter="12px" md-gutter-gt-sm="8px" >

    <md-grid-tile class="gray"
        md-rowspan="3" md-colspan="2" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>#1: (3r x 2c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="green">
      <md-grid-tile-footer>
        <h3>#2: (1r x 1c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="yellow">
      <md-grid-tile-footer>
        <h3>#3: (1r x 1c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="blue"
        md-rowspan="2">
      <md-grid-tile-footer>
        <h3>#4: (2r x 1c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="red"
        md-rowspan="2" md-colspan="2" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>#5: (2r x 2c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="green"
        md-rowspan="2" >
      <md-grid-tile-footer>
        <h3>#6: (2r x 1c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

  </md-grid-list>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<script src="custom.js"></script>
</html>

和custom.css：

.gridListdemoBasicUsage md-grid-list {
  margin: 8px; }
.gridListdemoBasicUsage .gray {
  background: #f5f5f5; }
.gridListdemoBasicUsage .green {
  background: #b9f6ca; }
.gridListdemoBasicUsage .yellow {
  background: #ffff8d; }
.gridListdemoBasicUsage .blue {
  background: #84ffff; }
.gridListdemoBasicUsage .purple {
  background: #b388ff; }
.gridListdemoBasicUsage .red {
  background: #ff8a80; }
.gridListdemoBasicUsage md-grid-tile {
  transition: all 400ms ease-out 50ms; }

和custom.js：

angular.module('MyApp')
.controller('AppCtrl', function($scope) {});

并且在通过 cordova 创建构建并在 android phone 4.4 以下安装 apk 后，网格标题不起作用。只有我们能看到空白屏幕。但它在 android 版本 4.4 及更高版本中工作。

Answer 1

我认为目前不支持 4.4 以下的 android。关于它有一些issues。

一个公认的建议是使用 crosswalk 项目，它用 chromium 版本替换了默认的 webview。我们已经在我们的应用程序中进行了测试（只是在开发阶段），它似乎运行良好。

见https://crosswalk-project.org

希望对您有所帮助

angular material 使用 phonegap 构建的设计似乎在 android 4.4 以下的版本中不起作用

angular material design with phonegap build doesn't seems to be working in android version below 4.4

android

phonegap-plugins

cordova

angular-material