Why is it so hard to just scale up a WebView by 2x?
I’ve spent way too many days on something I thought would be simple.
In my app I rely in some sections on the integration of webpages and some web apps in a normal Android WebView for a large-screen / kiosk-ish use case, and I need the pages rendered at 2x scale due to the display size I will be using in the final project setup.
First obvious attempt was WebView.setInitialScale(200). Turns out this is basically useless and did not do anything? Most of the websites ship their own viewport meta tag, and that function can't handle it? I tried the usual useWideViewPort / loadWithOverviewMode combinations too but no luck.
Next idea was injecting a viewport meta tag at document-start using WebViewCompat.addDocumentStartJavaScript.
That worked on a bunch of sites, but then on some websites it rendered as a totally blank page. Then I tried doing it later in onPageFinished. That fixed the previously broken sites, but then another site started fighting me. It was a Next.js web app and every route change re-renders Head, which kept resetting the viewport back to initial-scale=1.
So I added retries at 400ms / 1200ms / 2400ms. Which worked. But it felt and looked absolutely disgusting with the rescaling attempts.
So I replaced the retry nonsense with a MutationObserver watching document.head, and re-applied my viewport whenever something touched it. It was better until I tested it and some pages still rendered at 1x. Then I clicked anywhere on the page, and it instantly snapped to 2x.
The actual issue seems to be that changing the content attribute on an existing viewport meta tag doesn’t reliably trigger a viewport recalculation in Android WebView. On normal browsers on the Desktop this is a standard feature but on WebView?? It is such a pain
What works for now is removing the existing viewport meta tag entirely, adding a brand-new one, forcing layout, and keeping the MutationObserver around so the website can’t overwrite it later.
All of that just to make the website content appear a bit bigger (well double, 2x scale but still valid for any scaling factor).
Am I missing something obvious here? Is there actually a clean Android WebView API for "render this page at Nx scale and ignore whatever the site says"?
Because this feels like a weirdly hard problem for something that sounds like it should be one line and done with setInitialScale(200)