Question

构建我的Ionic应用程序的界面我遇到的问题是它的渲染方式会有所不同，具体取决于你在哪里运行它。每当我修理一些东西时，我最终都会破坏其他东西。

以下是我正在开发的邮件收件箱的样子：

离子服务和Android模拟器：http://s17.postimg.org/525i6eg6n/error_buzon.png
Android设备：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上运行时，特定的类会自动添加到正文标记中。

iOS：<body class="platform-ios">
Android：<body class="platform-android">
网址：<body class="platform-browser">

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

Ionic：CSS在Ionic Serve，Android模拟器和Android设备上的呈现方式不同

1 个答案: