Enable viewport on PhoneGap with Android

Question

PhoneGap : 1.5.0, Android : 2.3.4

I added a viewport tag into my HTML like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no;">

but it's not working. I have a window with width = 320px, but it should be 480px.

When I Googled this problem, I found this:

Add these 2 line to onCreate():

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

But after I inserted these two lines I couldn't launch into WebView anymore! Instead, I got the following exception:

ActivityThread.performLaunchActivity(ActivityThread$ActivityRecord, Intent) line: 2496

Here is the exception screenshot

Can anyone help, please?

thank you ghostCoder, but it shows no change, document.body.clientWidth always 320px, the same as offsetWidth and scrollWidth — chin, Apr 13 '12 at 02:10

score 2 · Answer 1 · answered Apr 13 '12 at 02:51

2

try this code:

Activity file:

public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                WindowManager.LayoutParams.FLAG_FULLSCREEN | 
                WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        super.loadUrl("file:///android_asset/www/index.html");
    }

html file

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=250,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

with android AndroidManifest.xml android:screenOrientation="landscape" The horizontal display is fullscreen

answered Apr 13 '12 at 02:51

judgement

437
3
12

Thank you judgement, but after i did what you say, the screen seems to appear width:480px (this is great !), but all get width function still get width:320px, do u know how fix it ? before : [link](http://dl.dropbox.com/u/15595413/keep/device-2012-04-13-113535.png) after : [link](http://dl.dropbox.com/u/15595413/keep/device-2012-04-13-113701.png) – chin Apr 13 '12 at 03:42
here is source code, it's very sample, everything is the default of phonegap [link](http://dl.dropbox.com/u/15595413/keep/src.7z) – chin Apr 13 '12 at 03:50
All get width function could get width of Container of your body. try to create container.
– judgement Apr 13 '12 at 04:51
Yes, i created a div with specified width/height, then i could get their width/height. Thank you very much ! But my last question is : could i get the right window/body size by javascript ? (or the only way is call phongap api to get screen size ?) – chin Apr 13 '12 at 06:39
document.body.clientWidth,document.body.clientHeight. it is body size of your phonegap app – judgement Apr 13 '12 at 07:19

score 0 · Answer 2 · answered Dec 21 '13 at 09:56

just tested, preference is not complete solutioin, do following:

config.xml: <preference name="EnableViewportScale" value="true" />

main activity, enable viewport in settings AFTER loadurl:

super.loadUrl(Config.getStartUrl(),1);   
WebSettings settings = appView.getSettings(); 
settings.setUseWideViewPort(true); 
settings.setLoadWithOverviewMode(true);

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

I've answered my fix here: https://stackoverflow.com/a/28755743/4612666 Basically change the AndroidManifest.xml min/target version to this:

<uses-sdk android:minSdkVersion="7" />

Can play with the version, not really sure.

edited May 23 '17 at 11:43

Community

1
1

answered Feb 27 '15 at 01:02

NibbleByte

21
1
4

Enable viewport on PhoneGap with Android

3 Answers3