How to set the initial zoom width for a webview

Question

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

User · Answer

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

User · Answer

I m working with loading images for this answer and I want them to be scaled to the device s width  I find that  for older phones with versions less than API 19  KitKat   the behavior for Brian s answer isn t quite as I like it  It puts a lot of whitespace around some images on older phones  but works on my newer one  Here is my alternative  with help from this answer  Can Android  39 s WebView automatically resize huge images  The layout algorithm SINGLE COLUMN is deprecated  but it works and I feel like it is appropriate for working with older webviews   WebSettings settings   webView getSettings        Image set to width of device   Must be done differently for API  lt  19  kitkat   if  Build VERSION SDK INT  lt  Build VERSION CODES KITKAT        if   settings getLayoutAlgorithm   equals WebSettings LayoutAlgorithm SINGLE COLUMN           settings setLayoutAlgorithm WebSettings LayoutAlgorithm SINGLE COLUMN     else       if   settings getLoadWithOverviewMode    settings setLoadWithOverviewMode true       if   settings getUseWideViewPort    settings setUseWideViewPort true

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android orientation  vertical      android layout width  fill parent      android layout height  fill parent  gt         lt WebView android id    id webview           android layout width  fill parent           android layout height  fill parent    gt   lt  LinearLayout gt    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 amp 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

User · Answer

in Kotlin You can use   webView isScrollbarFadingEnabled   true webView setInitialScale 100

User · Answer

If you have the web view figured out but your images are still out of scale  the best solution I found  here  was simply prepending the document with    lt style gt img display  inline  height  auto  max-width  100    lt  style gt    As a result all images are scaled to match the web view width

User · Answer

It is and old question but let me add a detail just in case more people like me arrive here   The excellent answer posted by Brian is not working for me in Jelly Bean  I have to add also   browser setInitialScale 30     The parameter can be any percentage tha accomplishes that the resized content is smaller than the webview width  Then setUseWideViewPort true  extends the content width to the maximum of the webview width

User · Answer

for images and swf videos use width as  100   and height as  98    mWebView2 getSettings   setJavaScriptEnabled true   mWebView2 getSettings   setLoadWithOverviewMode true   mWebView2 getSettings   setUseWideViewPort true   mWebView2 setScrollBarStyle WebView SCROLLBARS OUTSIDE OVERLAY   mWebView2 setScrollbarFadingEnabled true

User · Answer

Try using a wide viewport    webview getSettings   setUseWideViewPort true

[android] How to set the initial zoom/width for a webview

Examples related to android

Examples related to webview

Examples related to width

Examples related to scale

Examples related to android-webview