Android Webview - Webpage should fit the device screen

AndroidWebviewScalingAndroid Webview

Android Problem Overview

I have tried the following to fit the webpage based on the device screen size.

mWebview.setInitialScale(30);

and then set the metadata viewport

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

But nothing works, webpage is not fixed to the device screen size.

Can anyone tell me how to get this?

Android Solutions

Solution 1 - Android

You can use this

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

this fixes size based on screen size.

Solution 2 - Android

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

Solution 3 - Android

Friends,

I found a lot of import and great informations from you. But, the only way works for me was this way:

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

I am working on Android 2.1 because of the kind of devices from the company. But I fixed my problem using the part of informations from each one.

Thanks you!

Solution 4 - Android

These settings worked for me:

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

setInitialScale(1) was missing in my attempts.

Although documentation says that 0 will zoom all the way out if setUseWideViewPort is set to true but 0 did not work for me and I had to set 1.

Solution 5 - Android

Try with this HTML5 tips

http://www.html5rocks.com/en/mobile/mobifying.html

And with this if your Android Version is 2.1 or greater

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Solution 6 - Android

All you need to do is simply

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

Solution 7 - Android

These work for me and fit the WebView to screen width:

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

Thanks above advises and https://stackoverflow.com/questions/9564023/white-line-in-eclipse-web-view

Solution 8 - Android

I have same problem when I use this code

webview.setWebViewClient(new WebViewClient() {
}

so may be you should remove it in your code
And remember to add 3 modes below for your webview

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

this fixes size based on screen size

Solution 9 - Android

I had video in html string, and width of web view was larger that screen width and this is working for me.

Add these lines to HTML string.

<head>
<meta name="viewport" content="width=device-width">
</head>

Result after adding above code to HTML string:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>

Solution 10 - Android

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

This works great for me since the text size has been set to really small by .setLoadWithOverViewMode and .setUseWideViewPort.

Solution 11 - Android

You have to use HTML in your webView in this case. I solved this using following code

webView.loadDataWithBaseURL(null,
				"<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
						+ \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
						+ " alt=\"pageNo\" width=\"100%\"></body></html>",
				"text/html", "UTF-8", null);

Solution 12 - Android

Making Changes to the answer by danh32 since the display.getWidth(); is now deprecated.

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    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());

Solution 13 - Android

This seems like an XML problem. Open the XML document containing your Web-View. Delete the padding code at the top.

Then in the layout , add

android:layout_width="fill_parent"
android:layout_height="fill_parent"

In the Web-View, add

android:layout_width="fill_parent"
android:layout_height="fill_parent"

This makes the Web-View fit the device screen.

Solution 14 - Android

int PIC_WIDTH= webView.getRight()-webView.getLeft();

Solution 15 - Android

webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

will work, but remember to remove something like:

<meta name="viewport" content="user-scalable=no"/>

if existed in the html file or change user-scalable=yes, otherwise it won't.

Solution 16 - Android

This will help in adjusting the emulator according to the webpage:

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

You can set the intial scale in percentage as shown above.

Solution 17 - Android

The getWidth method of the Display object is deprecated. Override onSizeChanged to get the size of the WebView when it becomes available.

WebView webView = new WebView(context) {

	@Override
	protected void onSizeChanged(int w, int h, int ow, int oh) {

		// if width is zero, this method will be called again
		if (w != 0) {

			Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

			scale *= 100d;

			setInitialScale(scale.intValue());
		}

		super.onSizeChanged(w, h, ow, oh);
	}
};

Solution 18 - Android

For any developer landed here and facing a problem dealing with Webview initial zoom/scale(especially in custom webpages).

   webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setUseWideViewPort(false); //make sure this method is false so setInitialScale() can work correctly
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.setInitialScale(110);

Solution 19 - Android

In theory the combination of:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

with

settings.setUseWideViewPort(false)

fixes the problem, wrapping the content and fitting to the screen. But the NARROW_COLUMNS has been deprecated. I advice you to read this thread below that explores the issue in detail: https://code.google.com/p/android/issues/detail?id=62378

Solution 20 - Android

here's an updated version, not using deprecated methods, based upon @danh32's answer:

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

to be used alike:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);

Solution 21 - Android

For reference, this is a Kotlin implementation of @danh32's solution:

private fun getWebviewScale (contentWidth : Int) : Int {
    val dm = DisplayMetrics()
    windowManager.defaultDisplay.getRealMetrics(dm)
    val pixWidth = dm.widthPixels;
    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
             .toInt()
}

In my case, width was determined by three images to be 300 pix so:

webview.setInitialScale(getWebviewScale(300))

It took me hours to find this post. Thanks!

Solution 22 - Android

WebView webView = (WebView)findViewById(R.id.web_view);
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
Categories
Recommended Android Solutions
Recommended Webview Solutions
Recommended Scaling Solutions
Recommended Android Webview Solutions

Previous Solution:

"loop:" in Java code. What is this, and why does it compile?

JavaLabeled Statements

Next Solution:

How to convert Nonetype to int or string?

Python

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSWDeveloperView Question on Stackoverflow
Solution 1 - AndroidTushar VengurlekarView Answer on Stackoverflow
Solution 2 - Androiddanh32View Answer on Stackoverflow
Solution 3 - AndroidJosmar PeixeView Answer on Stackoverflow
Solution 4 - AndroidDocView Answer on Stackoverflow
Solution 5 - AndroidjosebetomexView Answer on Stackoverflow
Solution 6 - AndroidMuhammad Aamir AliView Answer on Stackoverflow
Solution 7 - AndroidNezneikaView Answer on Stackoverflow
Solution 8 - AndroidLinhView Answer on Stackoverflow
Solution 9 - AndroidBiljana DivljakView Answer on Stackoverflow
Solution 10 - AndroidSteveView Answer on Stackoverflow
Solution 11 - AndroidQadir HussainView Answer on Stackoverflow
Solution 12 - AndroidDucktalesView Answer on Stackoverflow
Solution 13 - AndroidZakiHackyView Answer on Stackoverflow
Solution 14 - AndroidjohnView Answer on Stackoverflow
Solution 15 - AndroidHoang Nguyen HuuView Answer on Stackoverflow
Solution 16 - AndroidjagadeeshView Answer on Stackoverflow
Solution 17 - AndroidSharkAlleyView Answer on Stackoverflow
Solution 18 - AndroidMohamed Ben RomdhaneView Answer on Stackoverflow
Solution 19 - AndroidAlécio CarvalhoView Answer on Stackoverflow
Solution 20 - AndroidMartin ZeitlerView Answer on Stackoverflow
Solution 21 - Androidsteven smithView Answer on Stackoverflow
Solution 22 - AndroidKetan RamaniView Answer on Stackoverflow