Menu
I need to be able to turn pinch-zoom on and off using the viewport setting on my Android PhoneGap app.
But I'm unable to get viewport to affect pinch-zooming at all when using PhoneGap. I cannot turn on Pinch-zoom in PhoneGap, but when browsing with the Android Native browser to the webpage everything works fine.
I have spent a lot of time searching for a solution, without any result.
I created a very simple index.html for testing, having viewport setting like:
<meta name="viewport" content="user-scalable=yes" />
As some has suggested I have also tried the viewport:
<meta name="viewport" content="user-scalable=1" />
Other solutions for Android PhoneGap would be to enable Android Native Pinch-Zoom which have been suggested here: zoom in phonegap for android But this will not work for me, since I need to be able to control the pinch-zoom from javascript. I.e. I need to be able to use javascript to change the viewport setting, to control when pinch-zoom is available (user-scalable=yes / user-scalable=no)
Please observe that other viewport settings like "initial-scale" and "target-densitydpi" seems to work fine. For example setting initial-scale=2 starts the app zoomed.
(I'm currently testing pinch-zoom on PhoneGap 1.4.1 and HTC Desire HD Android 2.3.3)
I'm beginning to think I have missed something obvious, since I find so little information about similar problems...
The minimal index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Minimal AppLaud App</h2>
<p> LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE </p>
<p><span id="devready">onDeviceReady not fired.</span></p>
</body>
</html>
Appreciate any ideas that you might have!
307
Are you using PhoneGap Build? It is not possible with PhoneGap Build.
With Desktop PhoneGap, if you haven't already, follow the PhoneGap Getting Started with Android Guide and set your code up in an Eclipse Project.
Once set up, edit your Main Java file, as in the getting started guide: Add the following imports:
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;
Below the 'super.loadUrl("file:///android_asset/www/index.html");' line that you put in, as part of the start up guide, add:
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
Clean and build your project - zooming should now be allowed.
To restrict how far users can zoom in, add a meta tag, like the one below to every HTML page:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
Just confirmed Pinch Zoom as working on the following Android Phones:
Samsung Galaxy S820L Android 4.4
LG Sunset L33L Android 5.0
With PhoneGap CLI (not the service), on Windows:
C:\>phonegap --version
5.4.1
Android SDK Tools Verion:
24.4.1 (from the SDK Manager)
Here is the code for MainActivity.java (platforms\android\src\com\phonegap\helloworld):
package com.phonegap.helloworld;
import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebView;
import android.webkit.WebSettings;
public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
}
}
And this is in index.html:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=3, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
One additional note - with this call:
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
got this when building:
uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details
Commented it out, and Zoom was not affected.
Thank you guys!!!
30
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
