Android Webview - Webpage Should Fit the Device Screen

Android Webview - Webpage should fit the device screen

You have to calculate the scale that you need to use manually, rather than setting to 30.

private int getScale(){
Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
Double val = new Double(width)/new Double(PIC_WIDTH);
val = val * 100d;
return val.intValue();
}

Then use

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Android WebView fit content to screen


I have create my own method with set background color and font color also.

WebSettings settings = desc.getSettings();
settings.setMinimumFontSize(50);
desc.getSettings().setJavaScriptEnabled(true);
settings.setLoadWithOverviewMode(true);
settings.setUseWideViewPort(true);
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);

desc.setWebChromeClient(new WebChromeClient());
String changeFontHtml = changedHeaderHtml(description);
desc.setBackgroundColor(context.getResources().getColor(R.color.all_app_bg_color));
desc.loadDataWithBaseURL(null, changeFontHtml,"text/html", "UTF-8", null);
desc.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:document.body.style.setProperty(\"color\", \"white\");"
);
}
});


public static String changedHeaderHtml(String htmlText) {

String head = "<head><meta name=\"viewport\" content=\"width=device-width, user-scalable=yes\" /></head>";

String closedTag = "</body></html>";
String changeFontHtml = head + htmlText + closedTag;
return changeFontHtml;
}

Android Webview, scale content to fit screen


wb.loadUrl("javascript:document.body.style.zoom = "+String.valueOf(scale)+";");

Where scale is a float, which you could calculate - I think in your case you want something like the following: browser.getHeight() / 480dp.
Load this Url after your webpage has finished loading.

How to fit a webpage on android screen(webview)?

Your question is not very clear but if I'm guessing you mean the webview is not expanding to fit the whole screen? Please post your code to support your question.

To make the webview expand to the whole screen, add the webview in your activity layout xml and make sure you set the layout_width and layout_height to fill_parent. Here's a simple example:

  <LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

Ryan

Scaling an Android WebView text html to fit?

EDIT:

This code may help you in fitting your wepage to webview.

webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);

You have to calculate the scale so that content fits on the screen.

private int getScale()
{
Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
Double val = new Double(width)/new Double(Your_webpage_width);
val = val * 100d;
return val.intValue();
}

Then use

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

2) To run something after webview has completely loaded,just implement WebViewClient and extend onPageFinished() as follows:

mWebView.setWebViewClient(new WebViewClient() {

public void onPageFinished(WebView view, String url) {
// do your stuff here
}
});

Fitting webpage contents inside a webview (Android)

So People can use this as a tutorial in the future.

There are a bunch of ways to handle zooms in android and fitting pages. It can be pretty temperamental at times and some methods work better than others.

For most people, Just use this:

WebView x;

x.setInitialScale(1);

This is the furtheset zoom possible. But for some sites it just looks pure UGLY.

This was the second version I found

test1.getSettings().setDefaultZoom(ZoomDensity.FAR);

Thats a nice all rounder than seems to just zoom out far enough for a lot but still not what I was looking for.

And now heres the final solution I have.

x.getSettings().setLoadWithOverviewMode(true);
x.getSettings().setUseWideViewPort(true);

Basically what these do is answered in another question like this.

 setLoadWithOverviewMode(true) 

Loads the WebView completely zoomed out

setUseWideViewPort(true)

Makes the Webview have a normal viewport (such as a normal desktop browser), while when false the webview will have a viewport constrained to it's own dimensions (so if the webview is 50px*50px the viewport will be the same size)

How to fit web images to Android screen size inside a WebView? while getting content of a site using JSON data, using restful

I have finally solved it by setting the style tag with the web content.

webViewLoader.setLoadDataWithBaseUrl("<style>img{display: inline;height: auto;max-width: 100%</style>"+ParentObject.getJSONObject("content").getString("rendered"));

If someone wants to add any more style just add <style></style> after or before <style>img{display: inline;height: auto;max-width: 100%</style>



Related Topics



Leave a reply



Submit