disabling zoom in a webview

[Sunny]

Hi,

I am at my wits end trying to figure this out.

Whats happening is that in my app i have input field of type "text".
Now whenever I touch the field to focus on it, the whole page zooms in
to show the field in super duper large size and after I am done typing
i cant press the submit button which has been now hidden by other
components on the zoomed in page. And the worst part is I cant even
zoom out of this.

These are the customizations I have done in the onCreate function -

super.appView.setBackgroundColor(0);
super.appView.setBackgroundResource(R.drawable.somebg);
super.appView.setMinimumHeight(height);
WebSettings ws = super.appView.getSettings();
super.appView.setInitialScale(100);
ws.setSupportZoom(false);
ws.setBuiltInZoomControls(false);

In the htmls I have tried using -

<meta name="viewport" content="user-scalable=no" />

But doing this only makes the page appear zoomed in by default.

I have been able to reproduce this on my htc desire and and android
virtual device with the same resolution (800x480).

This behavior does not happen on lower resolution (I have tried
480x320). The application runs in landscape mode.

How can I disable this zoom?

[Garry Taylor]

Has anyone been able to answer this? I too am struggling with pinch/zoom on Android, I really need to be able to turn it off, but nothing seems to work.

I have tried

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

<meta name="viewport" content="width=device-width" />

This locks the zoom (great!), but locks it at a nasty scaled in view (not great!). I tried to changed the scales, but it did not seem to make any difference.

I assume just about everyone making an actual app rather than the web page needs this work, so I guess it can be done somehow.

Any thoughts?

Garry

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

[Steve Dossick]

Hi Garry

I've not yet worked with DroidGap but the very best explanation I've found of how viewport settings are used in Android (and iPhone) is on http://d.android.com/guide/webapps/index.html , specifically the subsection on Targeting Screens from Web Apps.

-s

[rovemad]

I think this may help rescale for any screen.
http://uihacker.blogspot.com/2011/01/android-phonegap-scale-webview-to-fit.html

use this in your index.html :
<meta name="viewport" content="target-densitydpi=device-dpi" />

change your app.java to this
//*********************************************************
import com.phonegap.*;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.webkit.WebSettings.RenderPriority;
import android.view.WindowManager;
import android.content.Context;


public class App extends DroidGap {

// declare the original size of the iPad app
protected float ORIG_APP_W = 480;
protected float ORIG_APP_H = 800;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");

// set some defaults
this.appView.setBackgroundColor(0x000000);
this.appView.setHorizontalScrollBarEnabled(false);
this.appView.setHorizontalScrollbarOverlay(false);
this.appView.setVerticalScrollBarEnabled(false);
this.appView.setVerticalScrollbarOverlay(false);

// get actual screen size
Display display = ((WindowManager)
getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();

// calculate target scale (only dealing with portrait
orientation)
double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );

// make sure we're all good
Log.v( "ORIG_APP_W", " = " + ORIG_APP_W );
Log.v( "ORIG_APP_H", " = " + ORIG_APP_H );
Log.v( "width", " = " + width );
Log.v( "this.appView.getMeasuredHeight()", " = " + height );
Log.v( "globalScale", " = " + globalScale );
Log.v( "this.appView.getScale()", "index=" +
this.appView.getScale() );

// set some defaults on the web view
this.appView.getSettings().setBuiltInZoomControls( false );
this.appView.getSettings().setSupportZoom( false );
this.appView.getSettings().setGeolocationEnabled( true );
this.appView.getSettings().setLightTouchEnabled( true );

this.appView.getSettings().setRenderPriority( RenderPriority.HIGH );

// set the scale
this.appView.setInitialScale( (int)globalScale );
}
}

///***********************************************************

On Jan 15, 5:56 pm, Steve Dossick <sdoss...@gmail.com> wrote:
> Hi Garry
>
> I've not yet worked with DroidGap but the very best explanation I've found

> of how viewport settings are used in Android (and iPhone) is onhttp://d.android.com/guide/webapps/index.html, specifically the subsection

> on Targeting Screens from Web Apps.
>
> -s
>

> On Sat, Jan 15, 2011 at 8:02 AM, Garry Taylor <taylor.ga...@gmail.com>wrote:
>
> > Has anyone been able to answer this? I too am struggling with pinch/zoom on
> > Android, I really need to be able to turn it off, but nothing seems to work.
>
> > I have tried
>
> > <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0;
> > user-scalable=0;' name='viewport' />
> > <meta name="viewport" content="width=device-width" />
>
> > This locks the zoom (great!), but locks it at a nasty scaled in view (not
> > great!). I tried to changed the scales, but it did not seem to make any
> > difference.
>
> > I assume just about everyone making an actual app rather than the web page
> > needs this work, so I guess it can be done somehow.
>
> > Any thoughts?
>
> > Garry
>

> >> phonegap+u...@googlegroups.com<phonegap%2Bunsu...@googlegroups.com>

> >> For more options, visit this group at
> >>http://groups.google.com/group/phonegap?hl=en?hl=en
>
> >> For more info on PhoneGap or to download the code go towww.phonegap.com
>
> >  --
> > You received this message because you are subscribed to the Google
> > Groups "phonegap" group.
> > To post to this group, send email to phon...@googlegroups.com
> > To unsubscribe from this group, send email to

> > phonegap+u...@googlegroups.com<phonegap%2Bunsu...@googlegroups.com>

[Patrik]

Anyone found the solution to this problem? I've tried what has been
suggested in this post but with no luck. The scaling issue is a
problem as soon as you include images in the web site and everything
looks really bad as soon as you click on an input field.

On Feb 18, 4:38 pm, rovemad <rove...@gmail.com> wrote:
> I think this may help rescale for any screen.http://uihacker.blogspot.com/2011/01/android-phonegap-scale-webview-t...

> >zoomout of this.

>
> > These are the customizations I have done in the onCreate function -
>
> > super.appView.setBackgroundColor(0);
> > super.appView.setBackgroundResource(R.drawable.somebg);
> > super.appView.setMinimumHeight(height);
> > WebSettings ws = super.appView.getSettings();
> > super.appView.setInitialScale(100);
> > ws.setSupportZoom(false);
> > ws.setBuiltInZoomControls(false);
>
> > In the htmls I have tried using -
>
> > <meta name="viewport" content="user-scalable=no" />
>
> > But doing this only makes the page appear zoomed in by default.
>
> > I have been able to reproduce this on my htc desire and and android
> > virtual device with the same resolution (800x480).
>
> > This behavior does not happen on lower resolution (I have tried
> > 480x320). The application runs in landscape mode.
>
> > How can I disable thiszoom?
>
> On Jan 15, 5:56 pm, Steve Dossick <sdoss...@gmail.com> wrote:
>
>
>
> > Hi Garry
>
> > I've not yet worked with DroidGap but the very best explanation I've found

> > of howviewportsettings are used in Android (and iPhone) is onhttp://d.android.com/guide/webapps/index.html, specifically the subsection

> > on Targeting Screens from Web Apps.
>
> > -s
>
> > On Sat, Jan 15, 2011 at 8:02 AM, Garry Taylor <taylor.ga...@gmail.com>wrote:
>
> > > Has anyone been able to answer this? I too am struggling with pinch/zoomon
> > > Android, I really need to be able to turn it off, but nothing seems to work.
>
> > > I have tried
>
> > > <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0;
> > > user-scalable=0;' name='viewport' />
> > > <meta name="viewport" content="width=device-width" />
>

> > > This locks thezoom(great!), but locks it at a nasty scaled in view (not

> > > great!). I tried to changed the scales, but it did not seem to make any
> > > difference.
>
> > > I assume just about everyone making an actual app rather than the web page
> > > needs this work, so I guess it can be done somehow.
>
> > > Any thoughts?
>
> > > Garry
>
> > > On Fri, Dec 10, 2010 at 8:13 AM, Sunny <aditya.chan...@gmail.com> wrote:
>
> > >> Hi,
>
> > >> I am at my wits end trying to figure this out.
>
> > >> Whats happening is that in my app i have input field of type "text".
> > >> Now whenever I touch the field to focus on it, the whole page zooms in
> > >> to show the field in super duper large size and after I am done typing
> > >> i cant press the submit button which has been now hidden by other
> > >> components on the zoomed in page. And the worst part is I cant even

> > >>zoomout of this.

>
> > >> These are the customizations I have done in the onCreate function -
>
> > >> super.appView.setBackgroundColor(0);
> > >> super.appView.setBackgroundResource(R.drawable.somebg);
> > >> super.appView.setMinimumHeight(height);
> > >> WebSettings ws = super.appView.getSettings();
> > >> super.appView.setInitialScale(100);
> > >> ws.setSupportZoom(false);
> > >> ws.setBuiltInZoomControls(false);
>
> > >> In the htmls I have tried using -
>
> > >> <meta name="viewport" content="user-scalable=no" />
>
> > >> But doing this only makes the page appear zoomed in by default.
>
> > >> I have been able to reproduce this on my htc desire and and android
> > >> virtual device with the same resolution (800x480).
>
> > >> This behavior does not happen on lower resolution (I have tried
> > >> 480x320). The application runs in landscape mode.
>
> > >> How can I disable thiszoom?
>

> > >> --
> > >> You received this message because you are subscribed to the Google
> > >> Groups "phonegap" group.
> > >> To post to this group, send email to phon...@googlegroups.com
> > >> To unsubscribe from this group, send email to

> > >> phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c­om>

> > >> For more options, visit this group at
> > >>http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > >> For more info on PhoneGap or to download the code go towww.phonegap.com
>
> > >  --
> > > You received this message because you are subscribed to the Google
> > > Groups "phonegap" group.
> > > To post to this group, send email to phon...@googlegroups.com
> > > To unsubscribe from this group, send email to

> > > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c­om>

> > > For more options, visit this group at
> > >http://groups.google.com/group/phonegap?hl=en?hl=en
>

> > > For more info on PhoneGap or to download the code go towww.phonegap.com- Hide quoted text -
>
> - Show quoted text -- Hide quoted text -
>
> - Show quoted text -

[Chris Lambrou]

I had to set EnableViewportScale to false in the config.xml file (phonegap 2.5) and use the proper meta tag.

   

   <preference name="EnableViewportScale" value="false" />

.....

<meta name="viewport" content="width=device-width, user-scalable=no" />