Does PhoneGap ignore viewport tag with specific width?

Question

I developed webapp and successfully used the viewport element to install the application for different devices. On an iPhone, for example, I used this:

<meta name="viewport" content="width=685,user-scalable=0" /> 

My webapp looks great with this viewport in the iPhone Safari browser. So I thought it would be easy to wrap my webapp using PhoneGap as an AppStore App. But still I’m out of luck. The viewport tag seems to be completely ignored.

So, here is my question: Does the viewport tag generally work with a specific width (as in the above example) in PhoneGap? Or do I need to redo everything to responsive web design?

Answer 1

I struggled with the same for several hours. With the latest version of phonegap, I managed as follows:

In your main java add the following lines BEFORE super .loadUrl (blablabla

  super.init(); super.appView.getSettings().setUseWideViewPort(true); super.appView.getSettings().setLoadWithOverviewMode(true); 

This will allow the user to double-tap to zoom in / out. So change your meta:

<meta name = "viewport" content = "width = 685; target-density-dpi = device-dpi; initial-scale = 0.1; maximum-scale = 0.1; user-scaleable = no;" />

It worked for me with Phonegap 3.0 and Android> = 4

Answer 2

Use a meta tag like this to automatically set the width of the device:

 <META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/> 

Hope this helps.

Answer 3

Try adding this to your html header

 <META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/> 

and this is for your config.xml:

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

Answer 4

Try it -

  < meta name="viewport" content="width=device-width; user-scalable=yes; initial-scale=0.1; maximum-scale=5; minimum-scale=0.5" />