JetBrains
`meta name="viewport"` not working properly on mobile browsers
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
- Open this link in a mobile device, or web browser using the developer tools to get the
mobile preview - 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
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
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):
Here's a thread where this issue is being discussed: https://twitter.com/okatrych/status/1782501007546597389?t=Rx7JO-AdAdcgK-pVqa-mMw&s=19
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.
Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.
