Menu
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="[email protected]">
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
798
Try
<meta name="viewport" content="width=276, user-scalable=1" />
or If you add the following lines to your onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
or try using iScroll 4 (http://cubiq.org/iscroll-4) Pinch / Zoom
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
