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.
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.
getSettings(). setBuiltInZoomControls(true); per this answer to default my view to zoomed out and to be able to pinch-to-zoom.
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.
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(); } } }
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
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