WebView on orientation changed

Question

I have an iframe that looks like this:

<iframe width="100%" height="100%" src="-----source----" frameborder="0" allowfullscreen></iframe>

and handle orientation by my self in onConfigurationChanged. as layout changed the height and width changes as well. the issue is that after rotation iframe (from time to time) not fills the whole webview.

webview settings:

mWebView.setLayoutParams(new LinearLayout
                .LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
mWebView.setScrollContainer(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.setInitialScale(1);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setScrollbarFadingEnabled(false);

so it looks like that:

how to force it to fill all webview content?

p.s: when i load hppts pages it works ok, the issue with iframes only.

Answer 1

In android webview you have a problem with percentage. What I mean is if you declare by example a div/iframe like this:

iframe{
    height: 100%;
    width: 100%;
}

this won't work because if you use both % on width and on height. You will get a small screen like in the photo in the question.

So how to solve this problem? You need at least one declared in px. You need to declare width or height in px.

So a few examples:

iframe{
        height: 1500px;
        width: 100%;
    }

or

iframe{
        height: 100%;
        width: 1500px;
    }