17

I've looked through dozens of pages if similar questions, none of them have any answers, so hopefully this one will be different.

I have a webview, and I do not want the zoom of the view to change from the initial zoom level I have it set to. The only thing which changes the zoom level currently is when a text box is focused.

I need to be able to do this through Java code, not using the viewport meta tag.

Just so I don't have the common responses, I have the following in my code to disable zooming, and the zoom controls:

mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.getSettings().setSupportZoom(false);

I'm thinking that a possible solution is to check to see when an onFocus or even an onClick event occurs within the WebView and then zoomOut, but I'm not even sure if that is possible?

Any suggestions would be appreciated.

4
  • Please note, this appears to only happen on HTC devices (Incredible, EVO). The application works fine within the emulator and on 3 Motorola Android devices (Droid X, Droid Pro, Original Droid, Droid 2).
    – tplaner
    Jan 30, 2011 at 20:58
  • Actually, I spoke too soon -- the issue is being caused by Sense UI (by HTC), and that is available on the Galaxy now, I don't have it on mine though. If you disable it I be the issue will go away.
    – tplaner
    Feb 10, 2011 at 18:47
  • @evolve: does your zoom level change trigger onScaleChanged() in your WebViewClient?
    – rgr_mt
    Feb 22, 2011 at 2:14
  • Disabling Zoom also fixed issues I've had with using Responsive Design in a WebView in pre-4.0 devices.
    – MikeKusold
    Oct 25, 2012 at 18:07

9 Answers 9

22

UPDATE This answer was written almost 6 years ago, with all the new android versions that came since then, this is most likely outdated.

This thing caused a major headache, but finally was solved thanks to setDefaultZoom(ZoomDensity.FAR);

One thing which is important is that onCreate and loadUrl get called before the WebSettings, otherwise it caused a force close situation. Here the ENTIRE code including imports (for the novice Java users)

package com.my.app;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;

import com.phonegap.*;

public class MyDroidActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
        WebSettings settings = appView.getSettings();
        settings.setBuiltInZoomControls(false);
        settings.setSupportZoom(false);
        settings.setDefaultZoom(ZoomDensity.FAR);
    }
}
1
  • 2
    This works as is, however if you have problems getting your app to scale initially and use this fix: uihacker.blogspot.com/2011/01/… then this fix ceases to work anymore :( I've been pulling my hair out on this. Nov 3, 2011 at 6:32
6

I solved this on HTC phones by adding a WebViewClient with an empty listener for onScaleChanged. My app is PhoneGap, so this is what it looks like, but adding the listener should look the same in a non-PhoneGap app:

public class Main extends DroidGap {

private class NoScaleWebViewClient extends GapViewClient {

    public NoScaleWebViewClient(DroidGap ctx) {
        super(ctx);
    }

    public void onScaleChanged(WebView view, float oldScale, float newScale) {
        Log.d("NoScaleWebViewClient", "Scale changed: " + String.valueOf(oldScale) + " => " + String.valueOf(newScale));
    }
}

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    this.init();
    setWebViewClient(appView, new NoScaleWebViewClient(this));
    // disables the actual onscreen controls from showing up
    appView.getSettings().setBuiltInZoomControls(false);
    // disables the ability to zoom
    appView.getSettings().setSupportZoom(false);
    appView.getSettings().setDefaultZoom(ZoomDensity.FAR);
    appView.setInitialScale(100);
}

}

Strangely, the onScaleChange listener never gets called -- by listening for the zoom, it blocks the zoom from happening. I've found that I need all the other calls (setSupportZoom, setDefaultZoom, setInitialScale) in order for this to work, and removing any of them reverts to the old, buggy behavior.

1
  • 1
    If I do all of those settings WITHOUT overriding WebViewClient, it works for me
    – drogon
    Nov 2, 2012 at 8:47
5

I had the same trouble. I needed to find a way to scale content of webview to exact value, everything worked fine until user starts to input text. There are methods that work on relatively new devices android 4.0+ but fails on old ones. The only way that works everywhere is setting the zoom value not in Java but in viewport like this

<meta name="viewport" content="initial-scale=.80; maximum-scale=.80; minimum-scale=.80;" />

It works on every device I tested.

2

Did you try to disable the user-scalable in the viewport tag? Not sure if that will work for you, but it works for me. I did not need to do anything on the java side.

<meta name="viewport" content="user-scalable=no, width=device-width" />
1
  • The problem will still occur on HTC devices (any device which uses the Sense UI user interface).
    – tplaner
    Feb 17, 2011 at 13:45
2

I have encountered this problem too, and I solved it like this:

myWebview.getSettings().setDefaultZoom(ZoomDensity.FAR);

It's runing normally on Sumsung Galaxy Tab. I hope this will help you.

1

The WebView has one special "thing", which I think it will trigger many questions and answers here. What happens is, that when an URL is loaded, the default Android Browser kicks in through an Intent to handle this. The zooming takes part in this browser, not in your Webview.

Solution: You need to add a WebviewClient to tell Android that you handle the browsing yourself. An example:

// Use WebView and disable zooming

public class MyWebView extends Activity {
    // nested class
    private class HelloWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true
        }
    }

    private WebView mWebView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new HelloWebViewClient());
        mWebView.setInitialScale(500);   // added after user comment

        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setBuiltInZoomControls(false);
        mWebView.getSettings().setSupportZoom(false);

        mWebView.loadUrl("http://www.google.com");      

    }
}

My main.xml looks like this

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

This code disabled zooming on my HTC Desire running Android 2.2. Tapping into HTML Input fields makes no difference.

The whole topic of WebView/HelloWebViewClient as well as an important hint to handle the "Back" button correctly is documented in Hello Views, Web View. It should be required reading for anybody who uses WebView.

5
  • I'm sorry, I don't mean to be rude, but did you actually understand the question? I mean, what the question is about, is not just "disabling the zoom". It's about avoiding certain behaviour, which makes some devices (mainly HTC) to auto-zoom to 100% when a user presses on a html input field. In the example you gave, this is not happening cause the zoom is already 100% at the beginning.
    – mdelolmo
    Feb 21, 2011 at 9:08
  • Upon looking at my code again, I realized that I actually am already doing this, and it works on any non-HTC device. The reason why it does not work on HTC devices appears to be a known bug with the Sense UI user interface which apparently runs over-top of the base android code.
    – tplaner
    Feb 21, 2011 at 16:52
  • mdelolmo: You are right. I cannot reproduce your problem and therefore answered the question not in your interest. When I set an initial scale in this scenario it stays the same - regardless of tapping on in html input fields or not. Maybe you could provide code to reproduce the problem, especially the place in the code where you set the zoom level and and an URL with an input field that triggers the behvaviuor you describe. As I wrote above I am working with an HTC.
    – rgr_mt
    Feb 22, 2011 at 0:29
  • @rgr_mt add <meta name="viewport" content="user-scalable=no, width=device-width" /> to the HTML of the page you are loading and you will see the issue.
    – tplaner
    Feb 22, 2011 at 14:30
  • So the issue only happens when this HTML5 metatag is set? Would you care to put this important information into the question? I read your problem now as "HTML pages that use the viewport metatag to set their scale (by setting the viewport to be exact) to A and SDK scaling parameters that set their scale to B - contradicting parameters - seem to have problems". I guess thats kind of unavoidable, as long it is not defined which mechanism should overide the other. quirksmode.org/mobile/viewports.html might help.
    – rgr_mt
    Feb 22, 2011 at 15:02
0

I believe you can set the zoom level with WebView.setInitialScale method. It takes an int as scale so I guess you would want to do something like myWebView.setInitialScale(100).

0

This issue has been fixed by a firmware update on HTC devices, it was (apparently) being caused by the Sense UI overriding default Android functionality incorrectly.

It is very difficult to provide information on exactly when this was corrected, however my web application no longer zooms when a text box is clicked on any HTC device with the latest firmware.

The following two lines of code will disable the "zoom" aspects of an android webview:

// disables the actual onscreen controls from showing up
mWebView.getSettings().setBuiltInZoomControls(false);
// disables the ability to zoom
mWebView.getSettings().setSupportZoom(false);
-1

This was headache for me too, but fortunately I have found this article: How to stop zoom in on input focus on mobile devices.

Set font size of the text in the input element to 16px (or more) in the css file.

  input {
        font-size: 16px;
}

It is rather hack, but if nothig else works ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.