Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 741
cottonBallPaws Avatar asked Sep 27 '10 23:09

cottonBallPaws


People also ask

How do I enable zoom in Webview?

This example demonstrate about How to enable webview zoom controls in android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.

How do I zoom out in Webview Android?

getSettings(). setBuiltInZoomControls(true); per this answer to default my view to zoomed out and to be able to pinch-to-zoom.

How do I disable zoom in react native Webview?

How to disable zoom on react-native web-view ,is there a property like hasZoom={false} (just an example) that can be included in the below web-view tag that can disable zooming.


2 Answers

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();         }     } } 
like image 79
Brian Avatar answered Oct 01 '22 11:10

Brian


I figured out why the portrait view wasn't totally filling the viewport. At least in my case, it was because the scrollbar was always showing. In addition to the viewport code above, try adding this:

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);     browser.setScrollbarFadingEnabled(false); 

This causes the scrollbar to not take up layout space, and allows the webpage to fill the viewport.

Hope this helps

like image 28
grimmdp Avatar answered Oct 01 '22 11:10

grimmdp