Ionic serve displays differently before and after being refreshed

When serving my app for the first time, the app theme is as shown in the picture below:

However, after I refresh the page, it becomes like the picture below, which is the intended view:


This happens every time I serve the app for the first time. Other than that, everything works fine and the display from the first picture I sent never shows up as long as the server is not terminated.

Can anybody explain this? It is not necessarily a problem, but it would be nice if there’s an explanation for it and how to fix it.

What happens when you run it in the ionic lab using live reload?

run this command: ionic serve -l

If you’re using lazy loading, check the URL perhaps it may give you a hint on which page was actually loaded initially. Or sometimes, serving it again will do the trick.

It shows the three OS theme normally (android, iphone, windows) without any problem.

As far as I know, the URL never changes: http://localhost:8100/
And no matter how many times I serve it, the initial theme before it is refreshed is just like the page above.

Actually I just realized that in my case, it was the Android theme that’s chosen to be displayed when the app is initially served. When it’s refreshed and the device option is selected to iPhone, that’s when the theme changed to the intended device.
So the real question is, is everyone experiencing the same thing? And is there any settings (on Google Chrome or on my Ionic project) to set the initial OS to be served?

And exactly where in code does it happen you think ?

Where have you specified that intention ?

As also, are you using lazy loading ?