Недопустимое свойство CSS только на устройстве Android

Question

Я пытаюсь сделать кросс-платформенное приложение, используя Cordova и используя Ionic Framework. Казалось, что он отлично работает, пока я не попытался запустить приложение с помощью реальных устройств. Я тестировал под пульсацией эмулятора для Android и моего местного браузера и получил результат ниже (что является желаемым результатом):

Однако, когда я отправил программу на мой Android устройства для отладки я получил этот результат :

и когда я бегу под Windows Phone я получаю этот результат:

Моя главная задача здесь есть разница между андроида пульсация эмулятором и устройством. Я думаю, что у Windows-телефона есть проблемы с некоторыми локальными файлами, которые нуждаются в модификации, и по какой-то причине размеры не соответствуют должным образом, так что нижний колонтитул выходит слишком далеко вниз.

Проблема с устройством Android (я думаю) заключается в том, что он выдает ошибку «Недопустимое значение свойства CSS: ...» При запуске на устройство все в файле ionic существует около 40 недопустимых значений свойств CSS. min.css. Эти предупреждения не появляются, когда я нацелен на эмулятор ряби. Я пробовал несколько реструктуризации моего проекта и использовал полный файл ionic.css, но оба они не помогли. Это только предупреждения, и приложение выполняет компиляцию и запуск, но не с желаемым внешним видом, что заставляет меня думать, могу ли я решить эти проблемы с CSS, я могу исправить эту проблему.

Возможно, стоит отметить, что я запускаю Windows 8.1 с помощью VS2013 с инструментами Cordova для сборки/компиляции/запуска.

EDIT:

Запуск Android 4.4

кодекс, который был бы в вопросе не мой CSS (как у меня нет, а 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 все еще показывает, но после некоторых модификаций, что он правильно работает.

«В последней версии Ionic (beta 14) есть некоторые переменные конфигурации, которые по умолчанию не соответствуют значениям их платформы, а это означает, что они будут пытаться вести себя в соответствии с платформой, на которой они построены. вкладок, для iOS по умолчанию будет отображаться сверху, а Android внизу.

Вы можете легко «жестко установить» местоположение для всех платформ, установив функцию tabs.position в $ ionicConfigProvider внутри вашей конфигурации как это:

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

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

}]); 

Вы можете проверить документацию здесь: http://ionicframework.com/docs/nightly/api/provider/%24ionicConfigProvider/ "