Android Webview: Smaller Display Size Breaks Layout

Issue

I have an web app that's basically just displaying mobile website in an Android Webview, with some native bits for handling notification & navigation headers.

The issue is, when I change the Display Size setting (under Display) in an Android phone to anything smaller than Default, the content will be squeezed to the right side and left a blank space. I did a check with dev tool, and somehow the CSS's width is set to 66.67% of parent's by Android (in default it's 100%) & a minor left padding is also added. However, if the Display Size setting is larger than default, there is none / very minor style degradation.

The interesting part is when similar app is made in iOS (just display mobile site), there's no issue at all after changing the Display Size. So I'm pretty certain that the fix is limited to Android.

Is there any guidance to add code to anticipate these changes, or at least, completely disable the Display Size setting's effects?

*Edit: What I've tried & failed:

• Setting "width=device-width, initial-scale=1" in the website
• Set loadWithOverviewMode and useWideViewPort to true
• Combination of both of them

Solution

Solution is simple actually: there's a piece of old CSS code in the website that overrides CSS values when the width of the display is above certain threshold.

Answered By - Stephen