Hi there,
I tested my app on my phone Samsung A50 in portrait orientation and the layoutwas fine. However when turning the phone to landscape orientation the layout is magnified and the texts are enlarged. This is not welcome as in landscape orientation I would like to take advantage of the larger width and switch to a multi column layout.
How can this be fixed?
I read this:
but didn’t find any info regarding the issue.
Best regards, Ulrich
Do you have a viewport tag in your index.html?
If you have one, how does it look like?
Yes, I have, however it seems to me that Capacitor is ignoring it. Otherwise the size of the texts and other elements should be the same in both orientations.
<meta name="viewport" content="initial-scale=0.2 user-scalable=yes" />
It’s not a Capacitor problem, it’s how the WebView works, if you allow to scale and you rotate it will scale.
The recommended viewport is this <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">.
You can try just changing to user-scalable=no to yours or use maximum-scale=0.2, minimum-scale=0.2 if you really need it to be 0.2.