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"
/>
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");
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);
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 :
why does my font-size look so much larger in the android webview object than when viewed in the android browser?
Android WebView text zoom for different screens and os version
WebView text size
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With