Is this the best approach for a PWA?

@Kyrax80 wrote:

Hello,

I want to make a web version of my App too. But I don’t like that evertyhing looks so expanded when my App is in website mode:

image.png1922×422 12 KB

This is just a grid:

<ion-grid>
    <ion-row text-center>
      <ion-col col-6>
        <button ion-button color="secondary">Secondary</button>
      </ion-col>
      <ion-col col-6>
        <button ion-button color="secondary">Secondary</button>
      </ion-col>
    </ion-row>
  </ion-grid>

So I thought about creating styles for each a web version and a mobil version. Such as this:

page-home {
  .mobile {
    .toolbar-background-md {
      background: yellow !important;
    }
    p {
      background-color: yellow;
    }
  }

  .web {
    ion-grid {
      max-width: 50%;
    }
    .toolbar-background-md {
      background: blue !important;
    }
    p {
      background-color: blue;
    }
  }
}

And then check in my html which platform I am in in ion-content like this:

<ion-content [class.mobile]="platform.is('android') || platform.is('ios')"
  [class.web]="platform.is('mobileweb') || platform.is('core')">
   ...
</ion-content>

In this way, in a browser, it looks in a way which I prefer than the earlier picture:

image.png1906×654 13.7 KB

So my question is: is this a good approach or a terrible one? Is there anything better that I could do?

Thanks!

Posts: 1

Participants: 1

Read full topic