0

I'm learning Ionic with VueJS and I have a simple page testing stuff out. Using ionic serve shows what I'm aiming for, but when I deploy to my android device, a lot is different.

I've used Ionic 3 in the past and running on a device was so simple. Now with the use of capacitor and having to go through Android Studio makes this so much more complicated. It's my first time ever using Android Studio.

I attached a picture to show the differences between the ionic server and the Android Simulator.

    <template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title>Overview</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Overview</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container">
        <ion-input id="month" value="January"></ion-input>
      </div>

      <ion-card>
        <ion-card-header>
          <ion-card-title>
            <ion-input id="remaining-balance" value="$1050.43"></ion-input>
          </ion-card-title>
          <ion-card-subtitle>
            <ion-item>
              <ion-label>Starting Balance:</ion-label>
              <ion-input id="starting-balance" value="$1050.43"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Monthly Income:</ion-label>
              <ion-input id="starting-balance" value="$4050.43"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Bills (Total):</ion-label>
              <ion-input id="starting-balance" value="$2050.43"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Savings Balance:</ion-label>
              <ion-input id="starting-balance" value="$0.00"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Credit Debt (Total):</ion-label>
              <ion-input id="starting-balance" value="$1050.43"></ion-input>
            </ion-item>
          </ion-card-subtitle>
        </ion-card-header>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';

export default {
  components: {
    IonButtons,
    IonContent,
    IonHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar
  }
}
</script>

<style scoped>
ion-content {
  --ion-background-color: deepskyblue;
}
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  /* transform: translateY(-50%); */
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}

#month {
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
}

#month > input {
  text-shadow: 0px 1px black;
}

ion-card {
  --ion-background-color: white;
  top: 10%;
}

#starting-balance {
  text-align: right;
}

#remaining-balance {
  text-align: center;
  font-size: 4rem;
}
</style>

differences shown here

4

0 回答 0