Search code examples
androidiframeandroid-webviewamazon-fire-tv

Android WebView iFrame font scaling


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) Image in Chrome (displays correctly) FireTV WebView (incorrect) FireTV (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!


Solution

  • 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");