Ionic UI design changes on device switch

Ionic Framework
1

Whenever I run ionic serve --l, most of my designs tend to look different on Android and iOS. Not like little changes but major ones

I can have a button with margin-left of 20px, it works on Android but when I serve and change to iOS it goes back to default and looks scattered

Please help

2

The Ionic Framework does have adaptive/platform styles depending on which device the app is running on. The purpose is to give the user a native feel that they are familiar with on iOS or Android.

Can you share a screenshot and some code?

3

image
image1366Ă—768 111 KB

This is the page when i set the ionic lab to iOS, see how the works and their arrows are misaligned

image
image1366Ă—768 77.7 KB

see the difference on android and iOS

Here’s a Git Gist to the html and css for that page

4

Nice design!

I think one issue is that you are using ion-row without ion-grid and ion-column. An ion-list and ion-items might be better in this case or use the proper components for ion-grid. You would need to look at the CSS being applied in Dev Tools to see what exactly is causing it.

I also see that you are mixing custom CSS with Ionic. Nothing wrong with that, but I would try and pick a direction. Use Ionic components for everything or use Ionic for the native parts and custom CSS for the layout. I do the hybrid approach using Tailwind CSS for the layout and design and then Ionic components for the native feel - buttons, inputs, modals, toggles, refreshers, etc.

1 Like
5

I used ion-grid with rows and cols and I still got same issue so I removed it to see if it makes any difference. I use ionic components for buttons, toggles etc…

I tried adding mode=“md” and noticed that when I forced it to use md, it was same as android view cos of the material design but when I changed it to iOS or let it choose what platform it wants it goes back to what it looks like

I’m a beginner in ionic and took interest cos it’s built with html, CSS and JS. I have experience with wed design so I’m learning as I go

6

so I was wondering if me forcing it to use material design is best practice, here is the result

image
image1366Ă—768 152 KB

image
image1366Ă—768 124 KB

both pages have mode=“md”

Can I reach you via this post if I run into issues with ionic? I’d love the extra help from a professional on this journey to master ionic :pray:t3: :pray:t3:

7

It is really up to you on how you want the app to look and feel on each platform. I force md when it doesn’t affect the native feel for that platform and ios is causing design issues. What I am getting at is that I wouldn’t force md for the back button for example. Using an Android style on iOS would be out of place and not familiar to an iOS user.

I am by no means an expert in Ionic and just a normal community member :slight_smile: But, I have been deep in Ionic for a little over a year so I’ve had some experience. At first it was a huge learning curve for me getting back into Vue and learning TypeScript, Ionic, Capacitor all at once. Just stick with it and you’ll eventually get a hang of it. Once you get familiar too with all the Ionic components, you’ll soon figure out which ones work for you and which ones don’t for your specific app and requirements.

The community is here to help. If you have any more issues feel free to post here on the forums or on Ionic’s Discord.

1 Like
8

Thanks a lot, I appreciate the advise. I’ll keep going till I get the hang of it

1 Like
9

This kind of thing gave me so much trouble! So I decided to set the mode in the app.module so the entire app has that mode unless you override it with mode="md|iOS".
Since design doesn’t appear to be a challenge for you(great design from your screenshots) I think you can do this with no downsides.

To change the mode globally you do this in the app.module.ts:

imports {
  IonicModule.forRoot({
      mode: 'md'
  }),
}

Just and mode: 'md|ios' in the IonicModule import, if there’s already something there you don’t need to remove it