Anyone who have been able to create a website in Compose Web/Canvas that looks good on both desktop ...

# compose-web

[Justin Salér]

Anyone who have been able to create a website in Compose Web/Canvas that looks good on both desktop and phone?

I got really satisfied with how it looks on computer web but on a phone web it just looks so tiny. It is like I would want the scale of my dps to be twice as big. 😅

[Justin Salér]

image.png,image.png

[jamshedalamqaderi]

compose canvas web is still under experimental and i also had the issue that you have for my portfolio.

[jamshedalamqaderi]

canvas width is not fit with mobile width. The minium width always 900+ dp

[Pablichjenkov]

compose-web for mobile is at an early stage yet. Especially the touch event support.

[Justin Salér]

@jamshedalamqaderi Thank you for your input and perspective!

did you use any wise workaround? Using larger sizes on mobile? Using larger sizes when the total width is much higher?

[jamshedalamqaderi]

Here's the same question i've asked in an issue
https://github.com/JetBrains/compose-multiplatform/issues/3491

[jamshedalamqaderi]

FYI, there's no workaround for mobile until now. Because they didn't have plan for web this time. Maybe need some months

[Suhaib Roomy]

I added this line in the head section of index.html which fixed this for me

<meta name="viewport" content="width=device-width, initial-scale=1" />

[jamshedalamqaderi]

Adding viewport won't effect anything in compose canvas. I've added it on my site but not working...

[Justin Salér]

Thank you @Suhaib Roomy. It didn’t seem to fix it for me 😕 .

[Justin Salér]

Also, in addition to the strange size of the canvas. None of the buttons work on my phone 😕 . Maybe it is related to WASM GC?

[Pablichjenkov]

It is related to the touch input not being properly propagated. Touch in the button surrounding and you might hit a tap. There are a couple of issues already reporting these problems, so we just have to wait 🤷🏻

[Suhaib Roomy]

@Justin Salér I didn't test on an actual phone but in inspect mode in desktop chrome. I can try in an actual phone and let you know

[Justin Salér]

I was able to solve the weird scale on Chrome by adding

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/>

to the HTML header. 🙌

[jamshedalamqaderi]

Thanks @Justin Salér. It's also worked for me. But you have to refresh the page if the size has changed. is there any alternative?

[Justin Salér]

Sorry. What do you mean with changing size in this context? I am not able to do any resize (e.g. zoom) on my phone (I guess it is a side effect of this workaround), but on PC resizing works as normal.