Question

我正在尝试使用Cordova并使用Ionic Framework制作跨平台应用程序。在我尝试使用实际设备运行应用程序之前，它似乎工作得很好。我一直在Android和我的本地浏览器的ripple模拟器下测试并获得下面的结果（这是期望的结果）： Ripple

然而，当我将程序发送到我的Android设备进行调试时，我得到了这个结果： Android

当我在Windows Phone下运行时，我得到了这个结果：

我主要关注的是android ripple模拟器和设备之间的区别。我认为Windows手机存在一些需要修改的本地文件的问题，并且由于某些原因尺寸不正确匹配，因此页脚太远了。

Android设备的问题（我认为）是它会抛出错误＆＃34;无效的CSS属性值：...＆＃34;当我在文件ionic.min.css中运行所有设备时，大约有40个无效的CSS属性值。当我瞄准纹波仿真器时，不会出现这些警告。我尝试过对我的项目进行多次重组并使用完整的ionic.css文件，但两者都没有帮助解决这个问题。这些只是警告，应用程序确实编译和运行，但没有所需的外观，这使我思考，如果我可以解决这些CSS问题，我可以解决问题。

值得注意的是，我使用VS2013和Cordova Tools来运行Windows 8.1来构建/编译/运行。

编辑：

运行Android 4.4

有问题的代码不是我的CSS（因为我没有，而是Ionic的css，所以我将发布我目前使用的。）

index.html（我省略了几页，但遵循这种结构。）

    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>


    <script id="templates/tabs.html" type="text/ng-template">
        <ion-tabs class="tabs-icon-top tabs-positive">

            <ion-tab title="Home" icon="ion-home" href="#/tab/home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>
            <!--
            <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
                <ion-nav-view name="about-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
                <ion-nav-view name="contact-tab"></ion-nav-view>
            </ion-tab>
                -->
        </ion-tabs>
    </script>

    <script id="templates/home.html" type="text/ng-template">
        <ion-view view-title="Home">
            <ion-content class="padding">
                <div><a class="button icon icon-right ion-chevron-right" href="#/tab/resources">Additional Resources</a></div>
                <div><a class="button icon icon-right ion-chevron-right" href="#/tab/gmetrics">Global Metrics</a></div>
                <div><a class="button icon icon-right ion-chevron-right" href="#/tab/gfeed">Global Feed</a></div>
                <div><a class="button icon icon-right ion-chevron-right" href="#/tab/googleforms">Google Forms</a></div> 
                <div><a class="button icon icon-right ion-chevron-right" href="#/tab/social">Social Networking</a></div>
                <div><a class="button icon icon-right ion-chevron-right" href="#/tab/chapters">Chapters</a></div>        


</ion-content>
        </ion-view>
    </script>

App.js（完整）

angular.module('app', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
      })
      .state('tabs.home', {
          url: "/home",
          views: {
              'home-tab': {
                  templateUrl: "templates/home.html",
                  controller: 'HomeTabCtrl'
              }
          }
      })
      .state('tabs.resources', {
          url: "/resources",
          views: {
              'home-tab': {
                  templateUrl: "templates/resources.html"
              }
          }
      })
      .state('tabs.gmetrics', {
          url: "/gmetrics",
          views: {
              'home-tab': {
                  templateUrl: "templates/gmetrics.html"
              }
          }
      })
      .state('tabs.gfeed', {
          url: "/gfeed",
          views: {
              'home-tab': {
                  templateUrl: "templates/gfeed.html"
              }
          }
      })
      .state('tabs.googleforms', {
          url: "/googleforms",
          views: {
              'home-tab': {
                  templateUrl: "templates/googleforms.html"
              }
          }
      })
      .state('tabs.social', {
          url: "/social",
          views: {
              'home-tab': {
                  templateUrl: "templates/social.html"
              }
          }
      })
    .state('tabs.chapters', {
        url: "/chapters",
        views: {
            'home-tab': {
                templateUrl: "templates/chapters.html"
            }
        }
    });


    $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function ($scope) {
    console.log('HomeTabCtrl');
});

Answer 1

找到帮助我的answer here，无效的CSS仍在显示，但经过一些修改后，它现在正常工作。

＆＃34;在最新版本的Ionic（beta 14）中，有一些配置变量现在默认为其平台值，这意味着它们将尝试根据它们构建的平台来运行。对于标签，对于iOS，默认显示在顶部，Android显示在底部。

你可以很容易地＆＃34;硬设置＆＃34;通过在$ ionicConfigProvider中设置tabs.position函数，在您的配置函数中，所有平台的位置如下：

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

$ionicConfigProvider.tabs.position('bottom'); //other values: top

}]);

您可以在此处查看文档：{{3}}＆＃34;

仅在Android设备上无效的CSS属性

1 个答案: