Android WebView iFrame font scaling

Question

I have an app that essentially just loads a website to display that information. Within the website I have an iframe that loads an events calendar.

Viewing the website (via Chrome) on a computer, the events calendar looks exactly the way it should (yes I know the font is ridiculously small).

Viewing the site on a FireTV Stick via the Android app, the font size within the iFrame (events calendar) scales up.

I have noticed that with the FireTV, when the resolution is 1920x1080 the actual display resolution is 960x540 (which scaling the browsing down to will cause that same effect) @see Screen Size and Resolution

Image in Chrome (displays correctly) FireTV WebView (incorrect) I have also read up on Font-Boosting which is initially what I thought the issue was, but I have eliminated that as none of the techniques to "disable" it worked (html * {max-height: 99999999px}, etc...)

I feel as though the issue lies in the way I am calling the WebView in the Android app and the settings that are being applied. I'm almost certain that I am missing something there that would fix this issue. Here is what I have for the WebView settings:

mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setSupportZoom(true);
webSettings.setDefaultFontSize(12);
mWebView.setInitialScale(1);

EDIT 1: Okay, I figured out it is not only the iFrame that is scaling up, but it is all the content on the FireTV (this is apparently a feature). Their display resolution (dp) is 960x540. It appears that there is no way of making things 1920x1080, but when I display the iframe via Rise Vision's "My Rise Player" app, everything appears as normal.

How did they find a way to make things appear 1920x1080 on a FireTV?

If anyone in Rise Vision's dev team would care to comment and point me in the right direction, I would greatly appreciate it!

Polyhymnia

Have you tried using the webSettings.setTextZoom() to avoid automatic scaling? – Patency

@Patency That is definitely a move in the right direction. I added that and set it to 40 (just as a hard-coded thing for now for testing) and it corrected some of the text but not all of it. The text that was corrected was using vh's for their font-sizing. Text that used straight px was not corrected and was still scaled up. Any ideas for that? – Polyhymnia

Answer 1

The solution to this was rather simple. I just needed to set these values to 100

mWebView.getSettings.setTextZoom(100);
mWebView.setInitialScale(100);

Thanks to @altskop for getting me in the right direction

For those who are wondering the rest of the code, here you go:

WebView mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        Log.d(TAG, "Finished Loading.");
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

webSettings.setJavaScriptEnabled(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
webSettings.setTextZoom(100);

mWebView.setInitialScale(100);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.loadUrl("http://your.url.com");

Polyhymnia