Ionic：CSS 在 Ionic Serve、Android 模拟器和 Android 设备上呈现不同

Question

构建我的 Ionic 应用程序的界面时，我遇到的问题是它的呈现方式取决于你在哪里运行它。每次我修复某些东西时，我最终都会破坏其他东西。

我正在开发的消息收件箱如下所示：

• Ionic 服务和安卓模拟器：http://s17.postimg.org/525i6eg6n/error_buzon.png
• 安卓设备：http://s24.postimg.org/4jtj9gqlh/2015_05_22_16_45_45.png

HTML代码是这样的：

<ion-view hide-back-button="false" view-title="Buzón de Mensajes" class="buzon-page">
  <!-- <ion-nav-bar> </ion-nav-bar> -->
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-android-exit" ng-click="cerrarSesion()">
    </button>
  </ion-nav-buttons>

  <div class="superior">     
  <div class="list list-inset" >
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Buscar">
    </label>
  </div>


  <div class="botones">
    <div class="row">
      <div class="col">
        <button class="button button-outline button-block button-positive">
          Promociones
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-energized" >
          Aprobados
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-assertive" >
          Alerta
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-balanced" >
          ATM
        </button>
      </div>
    </div>
  </div>
  </div>

    <ion-content class="lista-contenedor">
    <ion-list class="list">
        <ion-item ng-repeat="mensaje in mensajes" 
        ng-class="mensaje.tipo == 'Promocion' ? 'clasePromocion': 
                  mensaje.tipo == 'Aprobado'  ? 'claseAprobado' : 
                  mensaje.tipo == 'Alerta'    ? 'claseAlerta'   : 
                  mensaje.tipo == 'ATM'       ? 'claseATM'      : 'default'" 
        ng-click="abrirMensaje($index)" 
        on-hold="mostrarMenu(mensaje, $index)"
        item="item"
        class="item-remove-animate">

        <h2><b>{{ mensaje.hid }}</b></h2>
        <h3>{{ mensaje.alert }}</h3>
        <p class="cont">{{ mensaje.mens }}</p>
        <p class="fecha">{{ mensaje.fecha }}</p>

        <ion-option-button class="button-positive" ng-click="mostrarMenuComp($index)">
          Compartir
        </ion-option-button>
        <ion-option-button class="button-assertive" ng-click="mostrarMenuElim($index)">
          Eliminar
        </ion-option-button>

      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

还有这样的 CSS：

/* 
  CSS para la pagina Buzon 
*/
/* tercera linea de cada mensaje */
.buzon-page .cont{
  color: gray;
}

/* contenedor de cuadro busqueda y botones */
.buzon-page .superior{
  margin-top: 15%;
}

.buzon-page .list-inset{
  margin-bottom: 0%;
}

/* cuadro de busqueda */
.buzon-page label{
  margin-top: 0%;
  border:2px solid #C0C0C0;
}

/* hilera de botones */
.buzon-page .botones{
  margin-top: 1%;
  margin-bottom: 1%;
}

/* cada boton */
.buzon-page .button-block{
  font-weight: 100;
  font-size: 1em;
  line-height: 1.5;
  padding: 0px;
  border:2px solid;
}

.buzon-page .row, .col{
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
}

.buzon-page .lista-contenedor{
  margin-top: 33%;
}

.item-remove-animate .item-content {
  padding: 15px;
}

.clasePromocion .item-content {
  border-left: solid 6px #0078ff !important; /* azul */
}

.claseAprobado .item-content {
  border-left: solid 6px #faaf40 !important; /* amarillo */
}

.claseAlerta .item-content {
  border-left: solid 6px #ee4036 !important; /* rojo */
}

.claseATM .item-content {
  border-left: solid 6px #00a551 !important; /* verde */
}

.default .item-content {
  border-left: solid 6px white !important; /* blanco por defecto */
}

.buzon-page .fecha{
  position: absolute;
  top: 15px;
  right: 20px;
}

编辑

显然Android设备中的差距是因为.buzon-page .lista-contenedor{ margin-top: 33%; }。问题是为什么在 Ionic Serve 和 Android 模拟器中需要它，而在实际设备中存在问题？我应该如何开发和应用这样的应用程序？

使用 Chrome DevTools 进行调试是最理想的，但我无法使用 4.4+ android 版本的设备。

Answer 1

Android 和 iOS 具有不同的浏览器，并且呈现的内容略有不同，在某些情况下，您必须使用 CSS 来为 Android 或 iOS 制作特定的 CSS。

当您构建应用以在 iOS 或 Android 上运行时，特定的类会自动添加到 body 标签中。

• iOS：<body class="platform-ios">
• 安卓：<body class="platform-android">
• 网址：<body class="platform-browser">

使用这些课程来解决您的问题。将它们添加到您的 CSS 中以进行特定更改。