search

JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.02k stars 1.1k forks source link

Kotlin/Wasm responsive layout #4791

Closed N7ghtm4r3 closed 3 weeks ago

N7ghtm4r3 commented 3 weeks ago

Describe the problem Hi, I'm using Kotlin/Wasm to build a webapp with Compose for web and I wonder know how It possible to build a responsive layout for mobile and desktop versions? There is a built-in way to do that or not?

Affected platforms Select one of the platforms below:

Versions

luludevmuniz commented 3 weeks ago

It will be easier when material3-adaptive and Window Size Class support for CMP is out. See 3688 and 2404. For the latter, we have https://github.com/chrisbanes/material3-windowsizeclass-multiplatform

N7ghtm4r3 commented 3 weeks ago

Thanks for the information!

But I tried to use the Window Size class but the result was more o less the same, so not correctly adapted to the mobile size, but the materia3-adaptive is still in development to be implemented in a future release?

Sanlorng commented 3 weeks ago

Thanks for the information!

But I tried to use the Window Size class but the result was more o less the same, so not correctly adapted to the mobile size, but the materia3-adaptive is still in development to be implemented in a future release?

Material3-windows-size is align the adaptive design guideline，if you want get the best experience ，you should read the guideline

N7ghtm4r3 commented 3 weeks ago

Yes sure! Thanks for the tip, but I'm facing this behavior also using the `Material3-windows-size':

Viewed from desktop:

Screenshot 2024-05-10 164751

Viewed from a mobile device (the same text is that little dot in the center of the screen):

Screenshot 2024-05-10 164845

It look like if the content of the page was zoomed out

PMARZV commented 3 weeks ago

its because <meta name="viewport" content="width=device-width, initial-scale=1.0"> is not set in the html file (i dont know if adding this will render the canvas unusable and clicks and pointer events will be affected )

N7ghtm4r3 commented 3 weeks ago

Okay thanks! I will try It and send a feedback about the click are still usable

N7ghtm4r3 commented 3 weeks ago

@PMARZV very thank you because the content is not more zoomed out and the clicks and pointer events looks like are not affected and work correctly