I am trying to adapt and port an old project to PhoneGap.
So far, the project works properly under Android browsers but it doesn't with PhoneGap since it doesn't adapt the content to fit the whole screen. It always leave a blank space and that's not what I would want. PhoneGap doesn't seem to pay attention to my viewport property in the metatag I am using.
I have been doing some tests to find out the problem without any kind of result.
For example, the following test just contains two files: index.html and config.xml
It contains a DIV that is 276 pixels width and I would want PhoneGap to make it fit the whole page as the Android browsers do.
By the way, I am using PhoneGap Build web site to build this test online.
Here is the content of the index.html file (I am not using DOCTYPE to make it simpler but even using it won't work properly):
<html>
<head>
<meta name="viewport" content="width=276, user-scalable=yes" />
<title>Title</title>
</head>
<body>
<div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
</body>
</html>
And this is the content of the config.xml file (note the preference EnableViewportScale set to "true", but even being set to "yes" won't work):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode="10"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>PhoneGap Example</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://build.phonegap.com" email="support@phonegap.com">
Hardeep Shoker
</author>
<preference name="EnableViewportScale" value="true" />
</widget>
So that is. Is there anything that I am doing wrong? How can I archieve what I am trying to do? I am sure it should have a pretty simple solution but I can't find it right now.
Thank you very much in advance and sorry about my English, it's not my native language.
Cheers, Joan