`meta name="viewport"` not working properly on mobile browsers

[alejandro-rios]

Describe the bug I'm using <meta name="viewport" content="width=device-width, initial-scale=1.0"> to scale the content correctly on mobile browsers, but the result looks resized to fit the content width rather of the device width, this also happens on the device toolbar options from the web browser

Affected platforms

• Web (K/JS) - Canvas based API

Versions

• Kotlin version: 1.9.23
• Compose Multiplatform version: 1.6.1

To Reproduce

1. Open this link in a mobile device, or web browser using the developer tools to get the mobile preview
2. See error

Expected behavior Content should look adjusted to the device width

Screenshots index.html

Firefox Focus

DuckDuckGo

Mobile preview from developer tools

Additional context Tested on safari and works as expected

Here's the official repo, in case you want to look in the code

[Schahen]

The fix will happen in 1.6.10. Why can try build 1.6.10-dev1557 from https://maven.pkg.jetbrains.space which already contained alleged fix

[alejandro-rios]

The fix will happen in 1.6.10. Why can try build 1.6.10-dev1557 from https://maven.pkg.jetbrains.space which already contained alleged fix

Did the update and looks better now, but, somehow is not taking the padding in count, here's how it looks on mobile:

and here is how it looks on mobile browser (with the version you mentioned):

[LouisCAD]

Here's a thread where this issue is being discussed: https://twitter.com/okatrych/status/1782501007546597389?t=Rx7JO-AdAdcgK-pVqa-mMw&s=19

[Xerosigma]

I'm having the same issue except mine actually appears fine in dev tools, just not the mobile browser. My viewport is set to the following: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Update: I targeted Kotlin/JS instead of WASM as described here and the issue went away on iOS Safari. Still a problem on Android though.