Incorrect scale in WebView

Question

I have a website built on top of PrimeFaces. My problem is that the content and the images on the WebView appear larger than on Chrome. What should I do to make rendering on WebView identical to that of Chrome?

Scaling does not seem to help because the website has a responsive design. I have also tried wrap_content instead of fill_parent with no success.

Update 1: The followings have no effect. I have excluded them from the code below to keep it minimal.

• WebViewClient
• ChromeViewClient
• setLoadWithOverviewMode(true)
• setUseWideViewPort(true)

Update 2: setInitialScale() has no effect.

MyActivity.java

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    webView = (WebView) findViewById(R.id.web_engine);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    if (savedInstanceState == null) {
        webView.loadUrl("http://www.primefaces.org/showcase/mobile/index.xhtml");
    }
}

main.xml

<RelativeLayout xmlns:a="http://schemas.android.com/apk/res/android"
            a:layout_width="fill_parent"
            a:layout_height="fill_parent"
            a:background="#ffffff"
            a:orientation="vertical" >

<WebView a:id="@+id/web_engine"
         a:layout_width="fill_parent"
         a:layout_height="fill_parent"
/>

Answer 1

Try:

webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
webView.getSettings().setSupportZoom(true);

Mentioned here: http://developer.android.com/guide/webapps/migrating.html

More specifically here: http://developer.android.com/reference/android/webkit/WebSettings.LayoutAlgorithm.html#TEXT_AUTOSIZING

Full code here:

mWebView = (WebView) mLayoutMain.findViewById(R.id.webview_main);
mWebView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return false;
    }
});
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
mWebView.getSettings().setSupportZoom(true);
mWebView.loadUrl("http://www.primefaces.org/showcase/mobile/index.xhtml");

Answer 2

I tried http://www.primefaces.org/showcase/mobile/index.xhtml in both mobile chrome and within application, and they both looks similar

Within application

In Chrome

I don't see any issues. Is it possible that you are getting difference in some specific android version? I verified it on 4.4.4

Answer 3

First of all I will recommend you to test your app on different mobile browser. If same problem then see below :

The difference between the browser and your app is probably because you are making mistake while using the setUseWideViewPort WebSetting to true.

Check below links :

1. why does my font-size look so much larger in the android webview object than when viewed in the android browser?

2. Android WebView text zoom for different screens and os version

3. WebView text size

Answer 4

For font size to match chrome or website without any resizing just do webSettings.setMinimumFontSize(1);

Kind Regards Ramin

Answer 5

I had a similar issue, where the problem was that the system font size (Settings -> Display -> Font size) affected the font size in the WebView, but not in the browser.

As I'm using cordova, I solved the issue with a cordova plugin, see this answer

Looking at the plugin code it does the following in Android to reset the font size:

mWebView.getSettings().setTextZoom(100);

Or (pre ICS):

mWebView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);