Ionic 2 different styling on different platforms

Ionic Framework ionic-v3
1

Hello,
This seems like a pretty basic question but I am having trouble figuring it out. What I would like to do is to create different styling for different platforms. As an example if I wanted a font style to be a little bigger on the Windows platform as compared to the Android platform, I thought I could do something like this (but it is not working):

   .platform-windows {
  .label-text {
  padding-left: 2px;
  padding-top: 2px;
  font: Arial Helvetica;
  font-size: 1.2em;
  word-wrap:break-word;
  }

}

.platform-windows {
.label-text-italic {
@extend .label-text;
font-size: 1em;
font-style: italic;
}
}

.platform-android {
.label-text {
padding-left: 2px;
padding-top: 2px;
font: Times;
font-size: .85em;
word-wrap:break-word;
}
}
.platform-android {
.label-text-italic {
@extend .label-text;
font-size: .7em;
font-style: italic;
}
}

I put this code in the scss file for the page that uses this style. Is it possible to create different styles for different platforms?
Thanks,

Jon

2

Hey Jon,

This links may help:


Regards,

Duy

3

Thanks for the reply Ruy but I wasn’t really looking to change the default styles. I am trying to use custom styles based on the platform that the application was running on.

I believe I found a solution but I do have two questions. Before the questions, here is the solution that I came up with:

In the SASS file I have two styles:

.label-text-larger {
padding-left: 2px;
padding-top: 2px;
font: Times;
font-size: 1.2em;
}

.label-text {
padding-left: 2px;
padding-top: 2px;
font: Arial Helvetica;
font-size: .80em;
}

Then in my HTML file I have lines like this:

<td colspan=4 class="top-border left-border right-border " [ngClass]="textStyle">PRODUCT CODE</td>

and finally in my typescript file I set the textStyle property based on the platform like this:

if (this.platform.is(‘ios’) || this.platform.is(‘android’)) {
this.textStyle = “label-text”;
}

So my first question is: Is this the best way to set a style based on the platform?

My second question is: If I try this: if (this.platform.is(‘windows’)) {} and run the code on a Windows 10 tablet, it does not detect that the app is running on a Windows device. What is the correct string to use for a windows device? I did look though the API and tried using the “platforms” api but the array that was returned was empty.

Thanks

Jon

4

Hey Jon,

on a website, we would probably check the platform and set a class on the body tag, e.g or etc. Then we could define your css classes in sass like this:

.android {
  .label-text { font-size: 0.8em }
}

.windows {
  .label-text { font-size: 1.2em }
}

Since you already know what platform it will run on, we could probably create a platform specific CSS and get rid of the platform class.

That being said, ionic offers a lot of reusable components that are customizable. By not using their css you will probably miss out on their components as well.

Good luck!

5

@hoffmanjon I’ve been having similar issues. I think the goal of “write once, run anywhere” just isn’t realized yet. My code looks good when simulated on multiple devices of the same general type – Android phone, Windows phone, “any” phone. Delivered from a browser, though, yuck. (Similarly, code that looks good on a phone looks bad on a tablet.) I’ve got a lot of work to do, and it looks as though I have to break some of the things that were “natural” for phones in order to make it happen. It feels as though “having a native app experience on a portrait-oriented phone” was the framework goal, and “building a PWA” is a tacked-on afterthought. I’m not complaining, because having a tool for hybrid development is amazing. But I do feel your pain.

FWIW, I’m using ngStyle and ngClass in a very similar way to what you posted. I have no idea if it’s best practice (I suspect it isn’t), but I’m figuring things out as I go.