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"
/>

WebView Chrome

Taylor Frey · Answer 1 · 2014-08-01T21:13:28.223

4

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

edited Aug 01 '14 at 21:13

answered Aug 01 '14 at 20:00

Taylor Frey

374
4
6

It has no effect (see Update 2). Did you actually try it? – mossaab Aug 01 '14 at 20:03
They are identical on my device (KitKat 4.4.4, Moto X). What are you using to test with? – Taylor Frey Aug 01 '14 at 20:38
KitKat 4.4.4, Nexus 4. Are they identical to the first or to the second picture? Were they identical with my original code or after adding some particular configuration? Can you attach screenshots? – mossaab Aug 01 '14 at 20:49
I'm seeing clearly different values being calculated when I inspect the relative WebViews in Chrome's Dev Tools. Specifically in the 'main' role div tag – Taylor Frey Aug 01 '14 at 21:04
Ah ha! figured it out. At least on my device. Editing answer to reflect my changes. – Taylor Frey Aug 01 '14 at 21:11
This didn't help unfortunately. Can you send a snapshot (actually 2 if possible)? – mossaab Aug 01 '14 at 22:18

score 4 · Answer 2 · edited May 23 '17 at 12:25

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

score 2 · Answer 3 · edited May 23 '17 at 11:53

2

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 :

edited May 23 '17 at 11:53

Community

1
1

answered Aug 07 '14 at 13:54

VVB

7,363
7
49
83

Thanks for the answer. Rendering on the mobile browser (Chrome) is perfect. So I don't need to check a different browser. Can you include a tested code that would correct the mistake I might be making? I had seen these questions before I asked mine. Changing the text size has an effect. But, the images remain bigger than they should. – mossaab Aug 07 '14 at 17:49
Try this for images webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); – VVB Aug 08 '14 at 03:55
Reference link : http://stackoverflow.com/questions/3099344/can-androids-webview-automatically-resize-huge-images – VVB Aug 08 '14 at 03:55
Thanks. The images are still rendered bigger than they should. In addition, when the web page contains an AdSense ad, the ad box is bigger in the WebView version. I don't think this problem is solvable by fixing the text, image, etc. Instead, it should be related to a parameter that controls the overall size. – mossaab Aug 08 '14 at 12:59

score 1 · Answer 4 · answered Aug 07 '14 at 18:25

1

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

Within application

enter image description here

In Chrome

enter image description here

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

answered Aug 07 '14 at 18:25

Chitranshu Asthana

1,089
8
19

Strange. I'm running on 4.4.4 as well with Nexus 4. Have you executed the same exact code that I included in my question or you made some modifications? – mossaab Aug 07 '14 at 22:41
Yup. The settings are same.. Only difference is that I am using match parent for layout width and height and my web view is child of a linear layout. – Chitranshu Asthana Aug 08 '14 at 03:02
I tried linear layout and match parent. The problem persists. – mossaab Aug 08 '14 at 13:00

score 0 · Answer 5 · answered Dec 24 '17 at 10:18

0

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

Kind Regards Ramin

answered Dec 24 '17 at 10:18

Ramin Rabii

359
4
14

Incorrect scale in WebView

5 Answers5