Search code examples
androidwebviewwidthscaleandroid-webview

How to set the initial zoom/width for a webview


I am trying to get the WebView to have similar behavior as the android browser. The browser opens all pages in a way that tries to fit their width to the screen. However, the default behavior of the WebView is to start at a 100% pixel scale so it starts zoomed in on the top left corner.

I have spent the last couple hours trying to find a way to get the WebView to scale the page to the screen like it does in the browser but I'm not having any luck. Has anyone found a way to accomplish this?

I see is a setting called setLoadWithOverviewMode, but that didn't appear to do anything at all. I also experimented with setInitialScale but on different screen sizes and web page sizes that won't be as graceful as the browsers scaling.

Any one have any leads?

Thanks

EDIT: Brian's method seems to work when the phone in landscape but not in portrait. In portrait it is close but still does not fit the whole screen in the page. I starting this bounty with the hope there is a sure-fire way to get the initial zoom to fit the page to the width of the page in any orientation or screen size.


Solution

  • The following code loads the desktop version of the Google homepage fully zoomed out to fit within the webview for me in Android 2.2 on an 854x480 pixel screen. When I reorient the device and it reloads in portrait or landscape, the page width fits entirely within the view each time.

    BrowserLayout.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <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>
    

    Browser.java:

    import android.app.Activity;
    import android.os.Bundle;
    import android.webkit.WebView;
    
    public class Browser extends Activity {
    
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.BrowserLayout);
    
            String loadUrl = "http://www.google.com/webhp?hl=en&output=html";
    
            // initialize the browser object
            WebView browser = (WebView) findViewById(R.id.webview);
    
            browser.getSettings().setLoadWithOverviewMode(true);
            browser.getSettings().setUseWideViewPort(true);
    
            try {
                // load the url
                browser.loadUrl(loadUrl);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }