Invalid scale in WebView

Question

I have a site built on top of PrimeFaces. My problem is that the content and images in WebView are larger than in Chrome. What to do to render rendering on WebView identical to rendering in the Chrome browser?

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

Update 1 : The following steps are not affected. I 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 details 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

First of all, I will recommend you to test your application in another mobile browser. If the same problem occurs, see below:

The difference between the browser and your application is probably due to an error when using setUseWideViewPort WebSetting to true.

Check out the links below:

• Why is the font size much larger in an Android web browser object than when viewed in an Android browser?

• Modifying Android WebView text for different screens and os version

• WebView Text Size

Answer 3

I tried http://www.primefaces.org/showcase/mobile/index.xhtml in both mobile chrome and in the application, and they both look the same

Inside application

In Chrome

I do not see any problems. Is it possible that you get the difference in a particular version of Android? I checked it on 4.4.4

Answer 4

I had a similar problem in which the problem was that the font size of the system (Settings → Display → Font size) affected the font size in the WebView, but not in the browser.

As I use cordova, I solved the problem with the cordova plugin , see this answer

Looking at the plugin code, it does in Android before reset the font size:

 mWebView.getSettings().setTextZoom(100); 

Or (pre ICS):

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

Answer 5

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

Regards Ramin