Different view on web and android device

[Scorpio]

Hi, why did I get a different result on the web (ionic serve), and Android devices?

Here is my code

      <ion-row>
        <ion-col size="6">

          <ion-card>
            <ion-card-header>
              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content>
              <img src="../../public/assets/pad.png">
            </ion-card-content>
          </ion-card>
        </ion-col>
        <ion-col size="6" >
          <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <img src="../../public/assets/barcodescanner.png">
          </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6" >
          <ion-card>
            <ion-card-header>
              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content>
              <img src="../../public/assets/contactless.png">
            </ion-card-content>
          </ion-card>
        </ion-col>
        <ion-col size="6">
          <ion-card>
            <ion-card-header>
              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content>
              <img src="../../public/assets/slotmachine.png">
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>

On the web, it looks like this

I mean with card components which has a border and shadow

But on a real device I get this:

PS. how do I make 4 cards on the center page?

[Hills90210]

CSS Utilities | Ionic Documentation