问题
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="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi;"
Everything looks great till I look at it on a device with Android 2.2 Specifically HTC Evo 4G.
回答1:
I messed around with this alot.
You have to have different solutions for different screen sizes and phones, done serverside.
This works for a HTC desire for instance:
<meta content='True' name='HandheldFriendly' />
<meta content='width=640px; initial-scale=0.50; maximum-scale=0.50;minimum-scale=0.50;' name='viewport' />
<meta name="viewport" content="width=640px" />
This is for an iphone:
<meta name="viewport" content="width=640px,user-scalable=0" />
回答2:
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);
回答3:
I found the answer, at least for me. It works on HTC desire and Sansung 3 low res.
Remove the viewport meta tags from the HTML.
In java apply the solution that can be found here.
this.appView.getSettings().setSupportZoom( true ); //Modify this this.appView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);//Add thisRemember to test if
WebSettings.ZoomDensity.FARis available to your SDK version (7 and above).
回答4:
Isn't this simply a text-size adjust issue?
body{
-webkit-text-size-adjust:none;
}
回答5:
Just set in manifest:
android:windowSoftInputMode="adjustPan"
回答6:
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.
回答7:
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
回答8:
there is a field int the webview.class mDefaultScale float the source code shows that when you display softkeyboard the mActualScale will change. so mDefaultScale is the problem. you can learn it from the grepcode site.
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);
}
}
回答9:
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
回答10:
Finally, I found a solution for my real-world project.
- MainActivity.java
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView mWebView = (WebView) findViewById(R.id.webview);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
mWebView.setOnFocusChangeListener(new MyOnFocusChangeListener(getScale()));
}
Log.i(MainActivity.class.getSimpleName(), "getScale: " + getScale());
}
/**
* Calculate the scale that we need to use manually.
*
* @return the scale that we need
*/
private float getScale() {
DisplayMetrics display = this.getResources().getDisplayMetrics();
int width = display.widthPixels;
Float val = Float.valueOf(width) / Float.valueOf(Constants.PAGE_WIDTH);
return val.floatValue();
}
- MyOnFocusChangeListener.java
public class MyOnFocusChangeListener implements View.OnFocusChangeListener {
protected float mScale;
public MyOnFocusChangeListener(float scale) {
mScale = scale;
}
/**
* Implement this method because we want to apply scale when focus changed.
* @param v the View we want to apply scale when focus changed.
* @param hasFocus has a focus or not.
*/
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
// We must try all cases because mDefaultScale will change on different versions of Android.
try {
Field defaultScale = WebView.class.getDeclaredField("mDefaultScale");
defaultScale.setAccessible(true);
defaultScale.setFloat(v, mScale);
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (NoSuchFieldException e) {
try {
Field zoomManager;
zoomManager = WebView.class.getDeclaredField("mZoomManager");
zoomManager.setAccessible(true);
Object zoomValue = zoomManager.get(v);
Field defaultScale = zoomManager.getType().getDeclaredField("mDefaultScale");
defaultScale.setAccessible(true);
defaultScale.setFloat(zoomValue, mScale);
} catch (SecurityException e1) {
e1.printStackTrace();
} catch (IllegalArgumentException e1) {
e.printStackTrace();
} catch (IllegalAccessException e1) {
e.printStackTrace();
} catch (NoSuchFieldException e1) {
try {
Field mProviderField = WebView.class.getDeclaredField("mProvider");
mProviderField.setAccessible(true);
Object webviewclassic = mProviderField.get(v);
Field zoomManager = webviewclassic.getClass().getDeclaredField("mZoomManager");
zoomManager.setAccessible(true);
Object zoomValue = zoomManager.get(webviewclassic);
Field defaultScale = zoomManager.getType().getDeclaredField("mDefaultScale");
defaultScale.setAccessible(true);
defaultScale.setFloat(zoomValue, mScale);
} catch (Exception e2) {
e2.printStackTrace();
}
}
}
}
}
}
来源：https://stackoverflow.com/questions/3702805/is-there-a-way-to-disable-the-zoom-feature-on-input-fields-in-webview