Android Webview Rem Units Scale Way to Large for Boxes

Android Webview rem units scale way to large for boxes

I found that setting the following webview settings will act as a workaround for this bug.

mWebView.getSettings().setMinimumFontSize(1);
mWebView.getSettings().setMinimumLogicalFontSize(1);

setMinimumFontSize

These settings really should only be honored for actual text display, not rem based positioning/sizing. This must but an android webview bug.

REM units doesn't work good in Android 2.* and Web View (until Android 4.2) Native Browser

Yo can't use rem line-height in android 2.*

The Solution:

Use multiple of the font size

Example

html{
  font-size:1px;
}

.fu{
  font-size:20rem;
  line-height:1.2; /*1.2 equal to 24rem(in this case) and will resolve conflict in old android*/
}

Android WebView abnormal large zoom level and font sizes on some devices

I figured out the reason for this problem and thought I'd share my solution.

First, Android WebViews use the Chrome rendering agent and since v. 5.0 (Lollipop) this has been moved to the Chrome APK so it can be updated independently of the OS. At some point recently a new release of Chrome caused my WebView to stop working. You can learn more about this here:
https://developer.chrome.com/multidevice/webview/overview

I uncovered this by deactivating Chrome on my test phone. This has the effect of reverting Chrome to the device factory install version of Chrome which can be considerably older than the most recent one depending on the phone. In my case, the default Chrome version (56.x) worked fine, the newest version (60.0.3112.116) broke my WebView.

The actual reason for the problem was an old setting I had in my Android manifest, namely android:anyDensity="false":

<supports-screens android:anyDensity="false" android:largeScreens="true"
                android:normalScreens="true" android:smallScreens="true"/> 

The anyDensity setting tells Android whether the app supports any density screens. I set it to false a long time ago because this had the effect of automatically scaling my app for various screen sizes. Not a good approach, but it worked well for a long time. However, a recent Chrome release no longer handled this well causing the WebView to display hugely zoomed in and mis-sized, and be non-responsive to viewport settings etc. It also caused some other strange non-WebView behavior like View opacity not working.

Removing the anyDensity setting or setting it to true (which is the default) solved the problem. Android recommends this always be set to true unless there's a good reason to set it to false like bitmap processing. And this should be done programmatically and not globally in the manifest.
https://developer.android.com/guide/topics/manifest/supports-screens-element.html

Android - Webview scale image to fit biggest dimension

Try #5 Worked!!!

        int iMW = imgView.getMeasuredWidth();
        int iMH = imgView.getMeasuredHeight();
        //Had the imw and iw backward...same for height
        int scW = (int) ((iMW / (float)iW) * 100); 
        int scH = (int) ((iMH / (float)iH) * 100);
        int fScale = 0;
        if (iMW < iW && iMH < iH)
        {
            if (scW < scH)
            {
                fScale = scW;
            }
            else
            {
                fScale = scH;
            }
        }
        if (iMW < iW && iMH > iH)
        {
            fScale = scW;
        }
        if (iMW > iW && iMH < iH)
        {
            fScale = scH;
        }
        //had signs backwards...DUH
        if (iMW > iW && iMH > iH)
        {
            if (scW < scH)
            {
                fScale = scW;
            }
            else
            {
                fScale = scH;
            }
        }
        wView.setInitialScale(fScale);
        wView.loadUrl(pUrl);

Scale down WebView initial scale

When you use user-scalable=no the ability to zoom is disabled. If you don't have access to change this from the web page source the only possible solution is to change the Viewport Content property using Javascript when the page is finished loaded. To allow this you have to set setJavaScriptEnabled(true);

webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient(){
 @Override
 public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    //Option 1: change the viewport content after the page is finished loaded and set initial-scale=0.93 and user-scalable=yes
    view.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, initial-scale=0.93, maximum-scale=0.93, user-scalable=yes');");

    //Option 2: change the body zoom style to the initial value you want eg: 0.93 (93%)
    //view.loadUrl("javascript:document.body.style.zoom = "+String.valueOf(0.93)+";");
  }
 });
//load the url
webView.loadUrl(url);

---

Related Topics