Is there a way to disable the zoom feature on input fields in webview?

Question

When a user clicks in an input field or textarea, the application zooms in. Is there a simple way to disable it?

Currently have the meta tag:

meta name=\         


        

Answer 1

In WebViewClassic.java, displaySoftKeyboard zooms in and pans if the actual scale is less than the default scale. There is a field in the WebWiew.class mDefaultScale float the source code shows that when you display softkeyboard the mActualScale will change.

So making sure that mActualScale is >= mDefaultScale should prevent the panning and rescaling. (Below is source code for WebView.java from the grepcode site -- which is no longer running.)

private void  displaySoftKeyboard(boolean isTextView) {
     InputMethodManager imm = (InputMethodManager)
     getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
        if (isTextView) {
            if (mWebTextView == null) return;
            imm.showSoftInput(mWebTextView, 0);

            if (mActualScale < mDefaultScale) {

                // bring it back to the default scale so that user can enter

                // text.
                mInZoomOverview = false;
                mZoomCenterX = mLastTouchX;
                mZoomCenterY = mLastTouchY;
                // do not change text wrap scale so that there is no reflow
                setNewZoomScale(mDefaultScale, false, false);
                adjustTextView(false);
            }
        }

        else { // used by plugins
            imm.showSoftInput(this, 0);
        }

    }

Code from googleSource--WebViewClassic.java in frameworks/base/core/java/android/webkit/WebViewClassic.java (for JellyBean api 17) shows similar functionality:

/**
 * Called in response to a message from webkit telling us that the soft
 * keyboard should be launched.
 */
private void displaySoftKeyboard(boolean isTextView) {
    InputMethodManager imm = (InputMethodManager)
            mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
    // bring it back to the default level scale so that user can enter text
    boolean zoom = mZoomManager.getScale() < mZoomManager.getDefaultScale();
    if (zoom) {
        mZoomManager.setZoomCenter(mLastTouchX, mLastTouchY);
        mZoomManager.setZoomScale(mZoomManager.getDefaultScale(), false);
    }
    // Used by plugins and contentEditable.
    // Also used if the navigation cache is out of date, and
    // does not recognize that a textfield is in focus.  In that
    // case, use WebView as the targeted view.
    // see http://b/issue?id=2457459
    imm.showSoftInput(mWebView, 0);
}

Answer 2

I know this thread is ancient history but I had the scaling issue with the virtual keyboard and eventually found the solution at this link:

http://rickluna.com/wp/2012/02/set-app-scaling-in-phonegap-android/

Add these lines to the app's java source

appView.getSettings().setSupportZoom(false);
appView.getSettings().setUseWideViewPort(false);
WebSettings ws = appView.getSettings();
ws.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
appView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
appView.setInitialScale(0);
ws.setSupportZoom(false);
ws.setBuiltInZoomControls(false);
ws.setUseWideViewPort(false);

I changed MEDIUM to FAR which keeps the screen at the original 1.0 magnification.

Hopefully that saves other people some searching

Answer 3

Isn't this simply a text-size adjust issue?

body{ 
    -webkit-text-size-adjust:none; 
}

Answer 4

I've got the same problem (on an HTC Incredible), and haven't found a good fix yet. But, one thing I did notice that if you use the Google mobile site (http://google.com/m) you don't get this behavior, I'm trying to figure out why that's the case.

I've tried all the fixes mentioned on stackoverflow that I could find, including on this thread and nothing that I've found works so far.

One crappy fix I've found the works is to set the initial scale to 150 (1.5X) and then scale your website accordingly then you also don't get this zooming behavior - maybe because it wants a zoom level of 1.5X when you click on a text input and if you're already at that zoom level then nothing happens? But, this feels super hacky and probably isn't robust across all phones.

Answer 5

webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.MEDIUM); 

This method was deprecated in API level 19.

this works in the last android versions 4.4.2.

webView.setInitialScale(0);//default,no zoom
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setLoadWithOverviewMode(false);
webView.getSettings().setUseWideViewPort(false);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

Answer 6

Here is how I solved that:

On all my pages I have:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:0.75)" href="css/ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:1)" href="css/mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:1.5)" href="css/hdpi.css" />
<meta name="viewport" content="target-densitydpi=device-dpi" />

On the pages with input fields, I have:

<link rel="stylesheet" media="screen" href="css/mdpi.css" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />

So, I don't benefit from hdpi on the forms, but at least it does not zoom in