Viewport not working in Android

[spicer]

Hi,

I am new to phonegap. Trying PG out. Been using appcelerator for a
while now, but a web geek at heart.

The html / css I already have created is 640 wide, so I need to use
viewport to scale things down. It works just fine on the iphone but
does not work at all on Android. I have tried almost every combination
of "viewport" I could find in google searches. I think Android is not
even reading the viewport tag.

http://www.cloudmanic.com/~spicer/skitch/iOS_Simulator-20110821-091935.jpg

<meta name="viewport" content="width=320, initial-scale=.5, maximum-
scale=.5, user-scalable=no;" />

Does anyone have any thoughts?

Thanks in advance.

~Spicer

[jacco]

try initial-scale=2, width=device-width

On Aug 21, 6:24 pm, spicer <spicer.matth...@gmail.com> wrote:
> Hi,
>
> I am new to phonegap. Trying PG out. Been using appcelerator for a
> while now, but a web geek at heart.
>
> The html / css I already have created is 640 wide, so I need to use
> viewport to scale things down. It works just fine on the iphone but
> does not work at all on Android. I have tried almost every combination
> of "viewport" I could find in google searches. I think Android is not
> even reading the viewport tag.
>

> http://www.cloudmanic.com/~spicer/skitch/iOS_Simulator-20110821-09193...

[spicer]

Hi Jacco,

Thanks for your support, but still no luck. It seems Android is just
completely ignoring the viewport tag.

Any other thoughts?

Thanks.
~Spicer

[SAP]

Hope the below link will solving this issue:
http://uihacker.blogspot.com/2011/01/android-phonegap-scale-webview-to-fit.html

--
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

--
Thanks & Regards
Arun Prakash S

[spicer]

Thanks.

I did see that post and did try it. I think I need to give it more
time to figure it out.

So more or less viewport does not work in Android?

~Spicer

On Aug 22, 10:27 am, SAP <sajapuram.arun.prak...@gmail.com> wrote:
> Hope the below link will solving this issue:http://uihacker.blogspot.com/2011/01/android-phonegap-scale-webview-t...

>
>
>
>
>
>
>
>
>
> On Sun, Aug 21, 2011 at 9:54 PM, spicer <spicer.matth...@gmail.com> wrote:
> > Hi,
>
> > I am new to phonegap. Trying PG out. Been using appcelerator for a
> > while now, but a web geek at heart.
>
> > The html / css I already have created is 640 wide, so I need to use
> > viewport to scale things down. It works just fine on the iphone but
> > does not work at all on Android. I have tried almost every combination
> > of "viewport" I could find in google searches. I think Android is not
> > even reading the viewport tag.
>

> >http://www.cloudmanic.com/~spicer/skitch/iOS_Simulator-20110821-09193...

[Horst]

Hello,

sorry, i have not much time and can look into my code. But in general
viewport works in android. But not for zooming. I use a css transform
direct in body tag to do this. I use it in my BMI Calculator:
https://market.android.com/details?id=net.klier.bmi2free

When you want, i can search the code an post it.

best regards
Horst

[spicer]

Hi Horst,

Thanks for the help. Your code sample would be great. This is the last
thing I am struggling with.

Thanks.
~Spicer

[Horst]

Sorry for the delay.

I use this viewport:
<meta name="viewport" content="target-densitydpi=device-dpi; user-
scalable=no" />


And this on onDeviceReady:

var orgWidth;
var orgHeight;
if(window.localStorage.getItem('orgWidth')==null){
orgWidth=screen.width;
orgHeight=screen.height;
window.localStorage.setItem('orgWidth',orgWidth)
window.localStorage.setItem('orgHeight',orgHeight)
}else {
orgWidth=parseInt(window.localStorage.getItem('orgWidth'));
orgHeight=parseInt(window.localStorage.getItem('orgHeight'));
if(orgWidth<screen.width){
orgWidth=screen.width;
orgHeight=screen.height;
window.localStorage.setItem('orgWidth',orgWidth)
window.localStorage.setItem('orgHeight',orgHeight)
}
}

var nScale=orgWidth/320;
if(orgHeight/480<nScale)nScale=orgHeight/480;
var transx=((orgWidth-320)/2)/nScale;
var transy=((orgHeight-480)/2)/nScale;
if(orgHeight/nScale-480>0){
transy=transy-(orgHeight/nScale-480)/2
}
if(nScale!=1){
document.getElementById('body').style.webkitTransform="scale("+nScale
+","+nScale+") translate("+transx+"px, "+transy+"px)";
document.getElementById('body').style.width="320px";
document.getElementById('body').style.height="480px";
}


This first part is, because screen.width sometimes return wrong
values. So i store it in local store and read it from there.
And i think i have set the id from body to id="body". Its a little bit
weird, but i can change the code fast to another id.

Hope it helps.

best regards
Horst

[ExsysTech]

I found setting this.appView.setInitialScale(0); in App.java
works :)

package com.exsyshost.android;

import android.os.Bundle;
import com.phonegap.*;

public class App extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);

super.loadUrl("file:///android_asset/www/index.html");
this.appView.addJavascriptInterface(this, "android");
this.appView.setInitialScale(0);

this.appView.setBackgroundColor(0);
//
this.appView.setBackgroundDrawable(this.getResources().getDrawable(R.drawable.exsybg));