Mobile web cersion UI is messed up

[mnobeidat13]

I deployed my app on repl.it. The interface renders fine when I open the app from my laptop but not so good when using my phone
On laptop:

On mobile:

What would the problem be?

[ndonkoHenri]

I think your phone's browser (or any other browser) is just rendering AS IS. That means, you built it that way, and all browsers will render it that way.
I don't know what you expected from the mobile version particularly, but when building your apps, and willing to test how it could behave on mobile, do this:

• if you are developing using your desktop's browser to see the results, resize the browser's window to common phone sizes and observe the result.
• if you are using a native desktop window, then you should also try resizing it to common phone sizes and observe the result.

There are some controls/properties you can use to ensure your stuffs fit the device's window:

• controls: ResponsiveRow,
• properties: Row.wrap, Column.wrap

[mnobeidat13]

Well, I was not aware the UI would not fit both platforms.
I cannot get ResponsiveRow working with my controls.
Is there a way to read the type of device the user is using to be able to render a compatible version for each device?

[ndonkoHenri]

Yes there is:

https://flet.dev/docs/controls/page#platform

https://flet.dev/docs/controls/page#web

https://flet.dev/docs/controls/page#pwa

[mnobeidat13]

Thanks man. It works fine. But page.platform detects iphone as macos not ios. will do more testing.